控制Datatables元素的位置(dom)

起始版本号:1.10.0

控制Datatables元素的位置

说明

Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角。 这些控件在给大家带来便利的同时,也可能出现困惑。比如我想把l放在i的后面,我想表格的上下都有p,我想加入自己的控件放在l的后面……这些太多了,那么下面就给大家介绍怎么去使用dom属性配置已经自定义。

上面我已经用了一些英文字母标注在每个控件的后面,开始看肯定会有些疑惑,或者不熟悉,不要着急,我来告诉大家这些到底是什么

作者为了适应我们所说的这些情况,已经考虑到了,所以有这么强大的dom属性。那么作者定义了如下字母:

这些字母你可以理解为一个标签,dt会自动把这些字母替换成相应的控件,就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次,其他的均可多次指定。

下面还有两个字母是应用到jQueryUI上的,不过作者推荐在1.10甚至1.11版本中不去使用他,通过使用 jQueryUIOption 来分离开

最后,你也可以添加插件给Datatables,指定新的字母。比如 TableTools就是添加了 T来表示。在dom里指定之后,相应的按钮就添加到表格上了

注意:dom的用法可能还不是很简单,希望在1.11版本的计划中更加优化这个参数的使用,让表格定位更简单

数据类型

这个选项用下列的数据类型赋值。

默认值

注意:当 jQueryUIOption 启用时,默认值是:<"H"lfr > t <"F"ip >

示例

不显示即时搜索,不管你是打开过滤还是关闭,这个是从元素上给删除了

/*
    <div class="wrapper">
      {length}
      {processing}
      {table}
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": 'lrtip'
} );

把Datatables所有的控件放在我自己定义的class的div里

/*
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
$('#example').dataTable( {
  "dom": '<"wrapper"flipt>'
} );

改变长度的和即时搜索在表格上方,信息和分页在表格下方,这里的上下指的是在不同的div里,便于控制

/*
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );

信息在顶部,即时过滤、改变长度和分页在底部,以及在后面加一个清除浮动,需要说明的是,这里的top、bottom和clear是需要已经定义的class名

/*
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

在看了上面这么多示例代码后,你还可以参考 DOM定位自定义工具按钮元素DOM定位视频讲解 ,相信在参考这么多例子后,你已经能够灵活的使用dom这个属性了

相关

下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。

http://datatables.net/reference/option/dom

Translation from DataTables.net, with permission