当前位置: > > > jQuery - 第三方表格插件DataTables使用详解6(表格dom元素的设置)

jQuery - 第三方表格插件DataTables使用详解6(表格dom元素的设置)

十、表格 DOM 元素位置介绍

(1)默认情况下 DataTables 生成的表格中各个元素组件的位置如下:
  • 最上方是选择每页显示数量的下拉框,以及数据搜索框。
  • 中间是表格内容主体。
  • 最下方是摘要信息,以及翻页按钮。

(2)查看源代码可以看到各个元素的位置结构如下(这里我把 table id 设为 myTable):
  • DataTables 会自动创建一个 wrapper,然后里面依次是 lengthfiltertablepaginate

十一、修改 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)下面配置我们将所有的组件元素外面都包裹一层 divclass 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>');
评论0