Jquery.Datatables dom表格定位 （轉）

Datatables會添加一些控制元素在表格的周圍，好比默認狀態下改變每頁顯示條數（l）的空間在左上角，即便搜索框（f）在右上角，表格的信息（i）顯示在左下角，分頁控件（p）顯示在右下角。 這些控件在給你們帶來便利的同時，也可能出現困惑。好比我想把l放在i的後面，我想表格的上下都有p，我想加入本身的控件放在l的後面……這些太多了，那麼下面就給你們介紹怎麼去使用dom屬性配置已經自定義。

上面我已經用了一些英文字母標註在每一個控件的後面，開始看確定會有些疑惑，或者不熟悉，不要着急，我來告訴你們這些究竟是什麼

做者爲了適應咱們所說的這些狀況，已經考慮到了，因此有這麼強大的dom屬性。那麼做者定義了以下字母：

• l - Length changing 改變每頁顯示多少條數據的控件

• f - Filtering input 即時搜索框控件

• t - The Table 表格自己

• i - Information 表格相關信息控件

• p - Pagination 分頁控件

• r - pRocessing 加載等待顯示信息

• < > - div elements 表明一個div元素 <div><div>

• <"#id" > - div with an id 指定了id的div元素 <div id='id'><div>

• <"class" > - div with a class 指定了樣式名的div元素 <div class='class'><div>

• <"#id.class" > - div with an id and class 指定了id和樣式的div元素 <div id='id' class='class'><div>

這些字母你能夠理解爲一個標籤，dt會自動把這些字母替換成相應的控件，就想模板同樣。上面的這些元素 l、f、t、i、p、r除了t只能指定一次，其餘的都可屢次指定。

 

下面還有兩個字母是應用到jQueryUI上的，不過做者推薦在1.10甚至1.11版本中不去使用他，經過使用 jQueryUIDT 來分離開

• H - jQueryUI'header'classes (fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix )

• F - jQueryUI'footer'classes(fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix)

 

最後，你也能夠添加插件給Datatables，指定新的字母。好比 TableTools就是添加了 T來表示。在dom裏指定以後，相應的按鈕就添加到表格上了

注意：dom的用法可能還不是很簡單，但願在1.11版本的計劃中更加優化這個參數的使用，讓表格定位更簡單