dataTable中dom参数的使用

参考官网

主要有六个表格模块的缩写:

  • l - Length changing 改变每页显示多少条数据的控件
  • f - Filtering input 即时搜索框控件
  • t - The Table 表格本身
  • i - Information 表格相关信息控件
  • p - Pagination 分页控件
  • r - pRocessing 加载等待显示信息

加上一些符号操作:

< > - div elements 代表一个div元素


<"#id" > - div with an id 指定了id的div元素

<"class" > - div with a class 指定了样式名的div元素

<"#id.class" > - div with an id and class 指定了id和样式的div元素

eg:

$('#example').dataTable( {
  "dom": 'tilp'
} );

即表示:table在上面,表格相关信息控件、改变每页显示多少条数据的控件、分页控件显示在表格底部。其中也可以加入class类名:如

$('#example').dataTable( {
  "dom": 'ti<"select-page"l>p'
} );

即给改变每页显示多少条数据的控件加上了一个类名select-page的div。
此配置可灵活操作,例如我的最终效果如下:


你可能感兴趣的:(dataTable中dom参数的使用)