datatables插件让其组件自定义排列，适应各种页面布局

如何自定义布局，让分页组件，页码筛选长度的下拉框，以及表格信息位置自定义

这个依赖的是sDom属性，这个有点不容易懂，它有自己的一个编码方式，最后会转换成html代码。

未做任何修改时，datatables插件默认显示方式为

但是项目中经常会遇到各种各样的布局，所以需要sDom属性来设置页面，修改各组件的显示位置。可参考：http://www.datatables.club/reference/option/dom.html

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>

 运用方法如下：

若我要使页面大小的下拉框显示在底部，则设置

$("#datatable").dataTable({

　　"sDom": "<t><'bottom'<'col-sm-2'i><'col-sm-2'l><'col-sm-8'p>"

})

 转化成html代码则为:

<div>t</div>

<div class="bottom">

　　<div class="col-sm-2">i</div>

　　<div class="col-sm-2">l</div>

　　<div class="col-sm-8">p</div>

</div>

t ：表示表格

i ：表示表格信息

l ：表示页面长度

p：表示页面分页

结果如下图：