jQuery - 第三方表格插件DataTables使用详解6(表格dom元素的设置)
十、表格 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>');