option dom 自定义布局表格《不定时一讲》 DataTables中文网

参数详解连接 domOption

前几天在搬家，所以没时间去更新了，今天搬完了，终于解放了。搬一次家感觉一辈子都不想再搬了……

说到搬家，我联想到布局，这也是今天所要讲的主题，关键字 DOM，总有些东西放在哪里不是你期望的，也总有些东西你不希望看到。我们弄清楚下面几个问题，你基本可以任意妄为了。

首先，什么是 DOM( Document Object Model )？

DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：
1. 核心 DOM - 针对任何结构化文档的标准模型
2. XML DOM - 针对 XML 文档的标准模型
3. HTML DOM - 针对 HTML 文档的标准模型

我们需要了解的是 HTML DOM，什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

其次，Datatables里所谓的DOM是什么？

domOption 也是指 html 元素。

用过Datatables的朋友应该都知道，默认情况下，表格都会有左上角的 改变每页显示条数、右上角的 搜索框、左下角的 表格信息 ，右下角的 分页信息 、表格中部 数据加载等待框 以及表格本身，这都是Datatables所谓的 DOM。它们实际上就是一个 div 包裹起来的 select、input或者其他 HTML 标签。

那么Datatables有以下的定义：

`l` 代表 length，左上角的改变每页显示条数控件
`f` 代表 filtering，右上角的过滤搜索框控件
`t` 代表 table，表格本身
`i` 代表 info，左下角的表格信息显示控件
`p` 代表 pagination，右下角的分页控件
`r` 代表 processing，表格中间的数据加载等待提示框控件
`B` 代表 button，Datatables可以提供的按钮控件，默认显示在左上角

既然都是 html 元素，那么他们的位置，是否显示这些都是可以控制的，我们管这个叫 DOM定位

最后，我们怎么摆放这些控件的位置，或者我不想看到她？

因为 domOption 的默认值是 lfrtip ,所以表格初始化后都是左上角是长度控制，右上角是过滤框，中间是表格和数据加载等待，左下角是表格信息展示，右下角是分页控件。

上面的 lfrtip 被Datatables处理后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 我是显示在左上角的，控制每页显示数据的条数 -->
<div>
    <select>
        <option>10</option>
    </select>
</div>

<!-- 我是显示在右上角的，可以过滤数据的输入框 -->
<div>
    <input type="text">
</div>

<!-- 我是等待加载提示，默认是不可以看到的哦 -->
<div><span>加载中...</span></div>

<!-- 我就是表格啊，在中间，最重要的位置 -->
<div>
    <table></table>
</div>

<!-- 我显示在左下角，用来告诉大家表格的信息 -->
<div>
    显示第 1 至 9 项结果，共 9 项
</div>

<!-- 我显示在右下角，用来控制表格的分页 -->
<div>
    <a>首页</a>
    <a>1</a>
    <a>2</a>
    <a>...</a>
    <a>尾页</a>
</div>

当然上面的标签，和实际的可能会有些不一样，但是大致的布局就是这样，我想大家应该能够看明白了。

下面再介绍三个标签，是Datatables自己定义的，通过这三个标签，Datatables就可以任你摆布了

< > - 这个尖括号就代表 html标签里的  <div></div>
<"className" > - 代表添加了class的div  <div class="className"></div>
<"#id" > - 代表添加了id的div <div id="id"></div>

认识了上面三个标签后，我们看看下面的代码（以Bootstrap css框架为例）：

1
2
3
4
5
    var table = $("#example").DataTable({
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
                  "<'row'<'col-sm-12'tr>>" +
                  "<'row'<'col-sm-5'i><'col-sm-7'p>>"
    });

下面是最终的 html 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 <div id="example_wrapper" class="dataTables_wrapper form-inline">
     <div class="row">
         <div class="col-sm-6">
             <div class="dataTables_length" id="example_length">
                 <label><select name="example_length" aria-controls="example" class="form-control input-sm">
                     <option value="10">10</option>
                     <option value="25">25</option>
                     <option value="50">50</option>
                     <option value="100">100</option>
                 </select> records per page</label>
             </div>
         </div>
         <div class="col-sm-6">
             <div id="example_filter" class="dataTables_filter">
                 <label>Search:<input type="search" class="form-control input-sm" placeholder=""
                                      aria-controls="example"/></label>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-12">
             <table id="example" class="table table-striped table-bordered dataTable" role="grid"
                    aria-describedby="example_info" style="width: 1304px;">
                 <thead>
                 <tr role="row">
                     <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                         aria-label=": activate to sort column descending" aria-sort="ascending"
                         style="width: 27px;"></th>
                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                         aria-label="序号: activate to sort column ascending" style="width: 77px;">序号
                     </th>
                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                         aria-label="标题: activate to sort column ascending" style="width: 570px;">标题
                     </th>
                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                         aria-label="连接: activate to sort column ascending" style="width: 481px;">连接
                     </th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr role="row" class="odd">
                     <td class="sorting_1">1</td>
                     <td>1</td>
                     <td><a href="Online Program knowledge share and study platform" target="_blank">Online Program
                         knowledge share and study platform</a></td>
                     <td>http://www.gbtags.com/gb/index.htm</td>
                 </tr>
                 <tr role="row" class="even">
                     <td class="sorting_1">2</td>
                     <td>2</td>
                     <td><a href="Share Code Gbtags" target="_blank">Share Code Gbtags</a></td>
                     <td>http://www.gbtags.com/gb/listcodereplay.htm</td>
                 </tr>
                 <tr role="row" class="odd">
                     <td class="sorting_1">3</td>
                     <td>3</td>
                     <td><a href="Online live Gbtags" target="_blank">Online live Gbtags</a></td>
                     <td>http://www.gbtags.com/gb/gbliveclass.htm</td>
                 </tr>
                 </tbody>
                 <tfoot>
                 <tr>
                     <th rowspan="1" colspan="1"></th>
                     <th rowspan="1" colspan="1">序号</th>
                     <th rowspan="1" colspan="1">标题</th>
                     <th rowspan="1" colspan="1">连接</th>
                 </tr>
                 </tfoot>
             </table>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-5">
             <div class="dataTables_info" id="example_info" role="status" aria-live="polite">
                 Showing 1 to 3 of 4 entries
             </div>
         </div>
         <div class="col-sm-7">
             <div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
                 <ul class="pagination">
                     <li class="paginate_button previous disabled" aria-controls="example" tabindex="0"
                         id="example_previous"><a href="#">Previous</a></li>
                     <li class="paginate_button active" aria-controls="example" tabindex="0"><a href="#">1</a></li>
                     <li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">2</a></li>
                     <li class="paginate_button next" aria-controls="example" tabindex="0" id="example_next"><a
                             href="#">Next</a></li>
                 </ul>
             </div>
         </div>
     </div>
 </div>

哎呀，懵逼了，这么多，tm看不懂~~ 我能理解，下面讲个简单点的。说之前需要让大家知道的是，不要想的很复杂，这真是一个简单的问题。

1
2
3
   var table = $('#example').DataTable( {
     "dom": '<"wrapper"flipt>'
   } );

这个应该很简单，起码 dom 指定的值只有一行，上面那个居然有三个，看着就晕，那么这个初始化代码被Datatables处理后是这样的：

1
2
3
4
5
6
7
  <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>

这里就没有把具体的 html 都贴出了，{filter} 就是指的具体的 html 代码，为了直观的演示，用这个代替表示

再看几个：

1
2
3
   var table = $('#example').DataTable( {
     "dom": '<lf<t>ip>'
   } );

处理后是这样的：

1
2
3
4
5
6
7
8
9
 <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
 </div>

再来一个：

1
2
3
    var table = $('#example').DataTable( {
      "dom": '<"top"i>rt<"bottom"flp><"clear">'
    } );

结果如下：

1
2
3
4
5
6
7
8
9
10
11
  <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>

看完这么多，我觉得应该是明白了，如果还不明白，我就只能回去重修语文课了（看不明白的一定要给我发邮件，不能眼睁睁看我的语文如此之差啊）

option dom 自定义布局表格

如果大家也有好的点子和建议，欢迎给我发邮件 `thxopen@datatables.club`告诉我

百度站内搜索

Google站内搜索

博客分类

赞助我们