l - Length changing 改變每頁顯示多少條數據的控制項 f - Filtering input 即時搜索框控制項 t - The Table 表格本身 i - Information 表格相關信息控制項 p - Pagination 分頁控制項 r - pRocessing 載入等待顯示信息 ...
- 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只能指定一次,其他的均可多次指定。
例子:
"dom":
"<'downloadExcel'B>" + "<'row'<'col-xs-3 font1'l><'#mytool.col-xs-4'>r>" + "t" +
"<'row'<'col-xs-6'i><'col-xs-6'p>>",
1、此處B為button標簽,舉例如下:
此功能是點擊按鈕導出為當前分頁的Excel
若是前臺分頁可以導出全部,若是後臺分頁則有兩個選擇:1、通過前提ajax調用查詢後臺所有數據,在後臺封裝轉為Excel;2、datatable中通過對
"lengthChange": true,"lengthMenu": [ [5, 10, 15, 20, 25, 50, 100, 5000], [5, 10, 15, 20, 25, 50, 100, "所有"] ]的配置,然後導出Excel。
PS:5000可以改成任意大,因為我的後臺是WHERE ROWNUM <= ?
1 "buttons": [
2 {
3 "extend": "excelHtml5",
4 "text": "導出",
5 "className": "btn btn-primary btn-sm local",
6 "customize": function(xlsx) {
7 var sheet = xlsx.xl.worksheets['sheet1.xml'];
8 $('row c[r^="C"]',sheet).attr('s','2');
9 }
10 }
11 ],
2、小寫的L:代表 改變每頁顯示多少條數據的控制項
r:代表 載入等待顯示信息
t:代表 Table 表格本身
i:代表 表格相關信息控制項
p:代表 Pagination 分頁控制項
<>:代表一個div
downloadExcel,row,col-xs-3...為class,可以在style中寫
不足之處,請指點,不勝感激。