datatable中DOM组件定位_赶路人儿的技术博客_

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

爱听歌的铁板烧 · Windows 下使用 vcpkg + ...· 1 年前 ·

酒量大的蛋挞 · docker service 指定网卡 ...· 1 年前 ·

慷慨的枕头 · 如何用 PowerBI DAX ...· 1 年前 ·

沉稳的椅子 · Shell 函數 (Visual ...· 2 年前 ·

朝气蓬勃的面包 · this document already ...· 2 年前 ·

datatables默认会打开部分特性，比如搜索框，分页显示等等。默认情况下，表格都会有左上角的 改变每页显示条数 、右上角的 搜索框 、左下角的 表格信息 ，右下角的 分页信息 、表格中部 数据加载等待框 以及表格本身，这都是Datatables所谓的 DOM。或许你不喜欢datatables这样去布局，可能你想把分页按钮放在底部的中间，搜索框放在顶部的左上角，不用担心datatables考虑到这个问题，使用dom选项就可以灵活配置各个特性的位置。

datatables定义了10个字符表示不同的组件

l - Length changing 每页显示多少条数据选项
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分页按钮
r - pRocessing 加载等待显示信息
< and > - div elements 一个div元素
<"#id" and > - div with an id 指定id的div元素
<"class" and > - div with a class 指定样式名的div元素
<"#id.class" and > - div with an id and class 指定id和样式的div元素

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

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

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

<!-- 我是显示在左上角的，控制每页显示数据的条数 -->
<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就可以任你摆布了。

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

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

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 代码：

<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>

下面讲个简单点的：

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

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

<div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>

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

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

最终的html：

<div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
 </div>

再来一个

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

结果：

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

最后再举一个例子：

比如，我们只想在表格左上方显示finfo的信息，只需要这样配置：

dataTable = $("#dataTable").DataTable({
        fixedHeader: true,
        bProcessing:true,
        dom: 'i',
        bFilter:false, //是否启动过滤、搜索功能 
        bLengthChange:false,//是否显示一个每页长度的选择条（需要分页器支持）
        bSort: false,//是否启动各个字段的排序功能  
        bPaginate:false,//是否显示（应用）分页器  
        destroy: true,//解决Cannot reinitialise DataTable
        bInfo: true,//是否显示页脚信息，DataTables插件左下角显示记录数
        bAutoWidth: false, //自适应宽度
        columns: [
            {"data": "no","defaultContent": "","width":"40%"},
            {"data": "fid","defaultContent": "","width":"60%"},
        ]
    });

datatable中DOM组件定位_datatable

参考：

http://datatables.club/manual/daily/2016/05/11/option-dom.html

http://datatables.club/example/basic_init/dom.html