datatable的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只能指定一次,其他的均可多次指定。

 

例子:

"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中寫

 

不足之處,請指點,不勝感激。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM