datatable中DOM组件定位

系统管理员 2021-05-12 11:55 384阅读 0赞

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%"},
            ]
        });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

参考：

[http://datatables.club/manual/daily/2016/05/11/option-dom.html][http_datatables.club_manual_daily_2016_05_11_option-dom.html]

[http://datatables.club/example/basic\_init/dom.html][http_datatables.club_example_basic_init_dom.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/c11707a4afb747039fa9817ee0c3168f.png
[http_datatables.club_manual_daily_2016_05_11_option-dom.html]: http://datatables.club/manual/daily/2016/05/11/option-dom.html
[http_datatables.club_example_basic_init_dom.html]: http://datatables.club/example/basic_init/dom.html