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只能指定一次,其余的都可屡次指定。ajax

 

例子:dom

"dom": spa

  "<'downloadExcel'B>" + "<'row'<'col-xs-3 font1'l><'#mytool.col-xs-4'>r>" + "t" +
  "<'row'<'col-xs-6'i><'col-xs-6'p>>",excel

一、此处B为button标签,举例以下:code

此功能是点击按钮导出为当前分页的Excel
如果前台分页能够导出所有,如果后台分页则有两个选择:一、经过前提ajax调用查询后台全部数据,在后台封装转为Excel;二、datatable中经过对

"lengthChange": true,"lengthMenu": [ [5, 10, 15, 20, 25, 50, 100, 5000], [5, 10, 15, 20, 25, 50, 100, "全部"] ]的配置,而后导出Excel。orm

PS:5000能够改为任意大,由于个人后台是WHERE ROWNUM <= ? xml

 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         ],

二、小写的L:表明 改变每页显示多少条数据的控件blog

  r:表明 加载等待显示信息element

  t:表明 Table 表格自己input

  i:表明 表格相关信息控件

  p:表明 Pagination 分页控件

  <>:表明一个div

  downloadExcel,row,col-xs-3...为class,能够在style中写

 

不足之处,请指点,不胜感激。

相关文章
相关标签/搜索