dataTable中dom参数的使用

参考官方文档dom参数说明：http://www.datatables.club/reference/option/dom.html

用途：
用于控制一些元素（如分页）在表格周围的那个位置。
比如，每页显示条数（l）在左上角，搜索框（f）在右上角，表格信息（i）显示在左下角，分页控件（p）显示在右下角。

各字符代表意义：
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>

具体例子：

1）

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

 

显示表格（t）和分页（p，Pagination 分页控件）。把p放在t下面。

表格下方出现诸如

 

2）

$('#example').dataTable( {
  "dom": 't<"wrapper"ip>'
} );

显示表格（t）、表格信息（i）、分页（p）；

i和p放在类名class为“wrapper”的元素中；

类名class为“wrapper”的元素放在表格后面。

调整表格分页等样式后可得到效果：