datatables 自定义布局

1. $(document).ready(function() {  

2.     $('#example').dataTable({  

3.     "sDom":'<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>'  

4.     });  

5. });  

6.    

7. //自定义布局   

8. //*  l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class    * Examples: <"wrapper"flipt>, <lf<t>ip>   

9.    

10. //语法结构   

11. /*  

12.     <> 表示一个闭合DIV  

13.     例：<> = <div></div>  

14.        

15.     <"类名称"> 表示一个带类名称的闭合DIV  

16.     例：<"top"> = <div class="top"></div>  

17.        

18.     l - 每行显示的记录数  

19.     f - 搜索框  

20.     t - 表格  

21.     i - 表格信息  

22.     p - 分页条  

23.     r - 加载时的进度条  

24. */  

25.    

26. //综合应用   

27. /*  

28.     例：<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>  

29.     表示  

30.     <div class="top">  

31.         表格信息(i)  

32.         搜索框(f)  

33.         每行显示的记录数(l)  

34.         分页条(p)  

35.         <div class="clear"></div>  

36.     </div>  

37.     加载时的进度条(bottom)  

38.     表格(t)  

39.     <div class="top">  

40.         表格信息(i)  

41.         每行显示的记录数(l)  

42.         分页条(p)  

43.         <div class="clear"></div>  

44.     </div>  

$(document).ready(function() { $('#example').dataTable({ "sDom":'<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>' }); }); //自定义布局 //* l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, <lf<t>ip> //语法结构 /* <> 表示一个闭合DIV 例：<> = <div></div> <"类名称"> 表示一个带类名称的闭合DIV 例：<"top"> = <div class="top"></div&gt; l - 每行显示的记录数 f - 搜索框 t - 表格 i - 表格信息 p - 分页条 r - 加载时的进度条 */ //综合应用 /* 例：<"top"iflp<"clear">>rt<"bottom"ilp<"clear">> 表示 <div class="top"> 表格信息(i) 搜索框(f) 每行显示的记录数(l) 分页条(p) <div class="clear"></div> </div> 加载时的进度条(bottom) 表格(t) &lt;div class="top"> 表格信息(i) 每行显示的记录数(l) 分页条(p) <div class="clear"&gt;</div> </div>