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版本的計划中更加優化這個參數的使用,讓表格定位更簡單

