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%"},
]
});
参考：
http://datatables.club/manual/daily/2016/05/11/option-dom.html
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
