文档对象模型 (DOM)

自 DataTables 1.10 起

定义表格控制元素在页面上显示的位置和顺序。

已弃用！

从 2.0 版本起，该功能已弃用。它将在 3.0 版本中移除。

此选项已被下面 DataTables 2 中的 layout 选项取代，它更灵活、直观，并且不依赖于样式框架。对于新项目，请勿使用此选项，并且积极更新较旧项目以使用 layout，而不是此选项。

描述

DataTables 会在表格周围添加一些元素，以控制表格并显示有关表格的其他信息。这些元素在屏幕上的位置受其在文档中顺序和应用于这些元素的 CSS 样式组合控制。此参数用于在 DOM 中控制其排序和周围的其他标记。

DataTables 中的每个表格控制元素有一个与其关联的字母，该字母用于此 dom 配置选项中，以指示该元素在文档顺序中的位置。

选项

DataTables 中内置的表格控制元素如下

l - length 更改输入控件
f - filtering 输入
t - table！
i - 表格 information 摘要
p - pagination 控制
r - processing 显示元素

除表格本身以外，每个选项都可以指定多次，可用于在表格上方和下方设置表格控件。DataTables 将自动同步这些多个控件。

标记

除了这些选项外，您还可以指定附加的 div 元素插入到文档中，这些元素可用于控件元素的样式/嵌套。要添加标签，应使用以下语法

< 和 > - div 元素
<"class" 和 > - 包含 class 的 div
<"#id" 和 > - 包含 ID 的 div
<"#id.class" 和 > - 包含 ID 和 class 的 div

样式

DataTables 支持的样式库将覆盖 dom 参数的默认值，并用适合其布局系统的值替换它。例如，Bootstrap 集成使用了 Bootstrap 的网格布局。

插件

DataTables 的功能插件可以用来给 DataTables 添加更多功能，通常会使用这个选项，给 DataTables 的核心功能添加新的字母。例如 Buttons 给 dom 添加了 B 选项，用于指定表格的控件按钮应该插入到表格的哪个位置。

以下扩展选项可以使用 dom 选项来进行初始化

B - Buttons
R - ColReorder
S - Scroller
P - SearchPanes
Q - SearchBuilder

类型

选项的类型可以包括以下类型

字符串

默认值

值：null

DataTables 1.x 中的默认值是 lfrtip。样式集成会设置自定义值。在 DataTables 2 中，用 layout 选项替换了该选项，默认值是 null。

示例

无过滤输入控件

/* Results in:
    {length}
    {processing}
    {table}
    {information}
    {pagination}
*/
new DataTable('#myTable', {
	dom: 'lrtip'
});

// As of DataTables 2, use `layout`:

new DataTable('#myTable', {
  layout: {
    topEnd: null
  }
});

更简单的包装元素

/* Results in:
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
new DataTable('#myTable', {
	dom: '<"wrapper"flipt>'
});

表格上方的长度和过滤、表格下方的信息和分页

/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
new DataTable('#myTable', {
	dom: '<lf<t>ip>'
});

表总结在题头、过滤、长度和处理在页脚，带换行元素。

/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
new DataTable('#myTable', {
	dom: '<"top"i>rt<"bottom"flp><"clear">'
});

关联

以下选项是直接相关的，在应用程序开发中也可能有用。

选项