jQuery - 第三方表格插件DataTables使用详解6（表格dom元素的设置）

2018-03-20 发布：hangge 阅读：3077

十、表格 DOM 元素位置介绍

（1）默认情况下 DataTables 生成的表格中各个元素组件的位置如下：

最上方是选择每页显示数量的下拉框，以及数据搜索框。
中间是表格内容主体。
最下方是摘要信息，以及翻页按钮。

（2）查看源代码可以看到各个元素的位置结构如下（这里我把 table 的 id 设为 myTable）：

DataTables 会自动创建一个 wrapper，然后里面依次是 length、filter、table、paginate

十一、修改 DOM 位置

想要修改 DOM 位置、层级结构，或给某个元素再包裹个容器，或添加个样式，只需要通过 dom 这个属性设置即可。

各个元素的缩写：

l：每页显示数量下拉框
f：内容搜索过滤输入框
t：数据表格
i：表格摘要信息
p：翻页按钮
r：加载指示器（processing）

1，简单元素、以及位置配置

（1）下面是一个最简单的配置样例，我们只设置了需要的组件元素，以及它们的次序：

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": 'lrtip'
});

/* Results in:
    
      {length}
      {processing}
      {table}
      {information}
      {pagination}
    
*/

（2）由于上面配置属性里没有搜索框（s），则界面上也就不会显示：

（3）查看源代码，具体的结构如下：

2，简单的元素层级配置

（1）下面配置我们将所有的组件元素外面都包裹一层 div（class 为 myWrapper），并修改它们的顺序：

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": '<"myWrapper"flipt>'
});

/* Results in:
    <div class="myWrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/

（2）显示结果如下：

（3）查看源代码，具体的结构如下：

3，更复杂的配置

（1）下面是多层级的配置。

CODE

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": '<lf<t>ip>'
});

/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/

（2）下面是多层级，并设置相关 class 的配置（还附加了一个 clear 元素）。

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
});

/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/

十二、同时配置多个相同的 DOM 元素

我们知道 lrtip 里面每一个字母代表一个 DOM 元素，当并不意味着这每一个元素只能出现一次。我们可以在一个表格中同时显示多个相同的元素（比如有两个翻页按钮）。

（1）比如下面样例，我们在表格上下方都放放置有页面信息和翻页按钮。

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": '<"top"ip<"clear">>rt<"bottom"ip<"clear">>'
});

/* Results in:
    <div class="top">
      {information}
      {pagination}
      <div class="clear"></div>
    </div>
    {processing}
    {table}
    <div class="bottom">
      {information}
      {pagination}
      <div class="clear"></div>
    </div>
*/

（2）运行结果如下：

十三、自定义 DOM 元素

（1）下面样例我们在表格的左上方插入一个自定义的DOM元素，显示一些简单的文本信息。

（2）样例代码如下：

<style media="screen">
  .welcome {
    float: left;
  }
</style>

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "dom": '<"welcome">frtip'
});

$("div.welcome").html('<b>欢迎访问 hangge.com</b>');