欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

datatable的dom配置

程序员文章站 2022-06-23 22:42:30
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中写

 

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