dom 定义表格控制元素以什么顺序在页面上显示文档(Options & API) DataTables中文网

描述(Description)

DataTables将在表格的周围添加许多元素，来控制表格并显示有关表格的其他信息。这些元素的位置在屏幕上由document(DOM)的顺序和应用于这些元素的CSS共同来控制。这个参数被用来控制他们的显示顺序以及额外的标记在DOM中是如何包裹的。

每个表格控制元素在DataTables中有一个单独的字母和他们关联，并且在 domOption 选项中使用的字母，来表示该元素在document中出现的位置。

选项（Options）

DataTables中的内置的控制元素是如下这些：
- l - length 长度改变输入控制
- f - filtering 过滤输入框
- t - table 表格本身
- i - information 信息概览
- p - pagination 翻页控制
- r - proccessing 处理中显示元素
以上每一个选项都可以指定多次（表格本身除外），这样可以在表格上下都有同样的控制元素。DataTables会自动保持多个控件的同步。

除了上述这些选项以外，DataTables还能理解两个常量（请注意，这两个选项在1.10版本中已经弃用，在1.11版本中删除，并将在 jQueryUIOption 选项分离到其他自己的主题文件中）
- H - jQueryUI 主题 “header” 样式（ fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfixString ）
- F - jQueryUI 主题 “footer” 样式（ fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfixString ）
标记语言（Markup）

除了这些选项，你还可以指明额外的 divTag 元素插入到document中，这样可以控制元素的样式/嵌套。需要添加标签，需要使用如下的语法：
- < 和 > - div 元素
- <"class" 和 > - 指定一个样式的 div 元素
- <"#id" 和 > - 指定一个ID的 div 元素
- <"#id.class" 和 > - 既指定ID又指定样式的 div 元素
样式（Styling）

DataTables支持的样式库将覆盖 domOption 参数的默认值，并将其替换为合适他们布局系统的值。比如，Bootstrap就会利用他的网格布局。

样式集成的默认值为：

Bootstrap 3:

  "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
  "<'row'<'col-sm-12'tr>>" +
  "<'row'<'col-sm-5'i><'col-sm-7'p>>",

Bootstrap 4:

  "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
  "<'row'<'col-sm-12'tr>>" +
  "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

Foundation:

  "<'row'<'small-6 columns'l><'small-6 columns'f>r>"+
  "t"+
  "<'row'<'small-6 columns'i><'small-6 columns'p>>",

jQuery UI:

  '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"lfr>'+
  't'+
  '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',

Semantic UI:

  "<'ui stackable grid'"+
      "<'row'"+
          "<'eight wide column'l>"+
          "<'right aligned eight wide column'f>"+
      ">"+
      "<'row dt-table'"+
          "<'sixteen wide column'tr>"+
      ">"+
      "<'row'"+
          "<'seven wide column'i>"+
          "<'right aligned nine wide column'p>"+
      ">"+
  ">"

插件（Plug-ins）

可以开发DataTables功能插件来向DataTables添加其他功能，并且通常会利用此选项向DataTables核心功能添加新字母。比如，Buttons添加B到 domOption 来指定应将表格控制按钮插入到表格的哪个位置。

通过 domOption 选项下面这些扩展（extensions）能够被初始化：
- B - Buttons
- R - ColReorder
- S - Scroller
- P - SearchPanes
未来走向

注意，我知道这是DataTables中最复杂的选项，需要学习很多，尤其是在使用集成样式选项时。我也计划在1.11版中改进此选项，以使其更易于使用。

类型(Type)

这个选项能够接受以下类型的参数：

stringType

默认值(Default)

Value ：lfrtip

请注意，如果使用集成样式选项之一，例如Bootstrap，Foundation或jQueryUI，他们将更改此参数的默认值，请参阅说明以了解他们设置的值。

例子(Example)

没有过滤输入框

/* Results in:
    <div>
      {length}
      {processing}
      {table}
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": 'lrtip'
} );

把控制元素包裹起来

/* Results in:
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
$('#example').dataTable( {
  "dom": '<"wrapper"flipt>'
} );

.wrapper{
  background: red;
}

长度改变控件和过滤框在上面，信息展示和分页在表格下面

/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );

表格概览信息在头部，过滤框，长度改变和处理中在底部再加一个clear元素

/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

.top{
  background: red;
}
.bottom{
  background: blue;
}
.clear{
  background: green;
}

dom 定义表格控制元素以什么顺序在页面上显示

描述(Description)

选项（Options）

标记语言（Markup）

样式（Styling）

插件（Plug-ins）

未来走向

类型(Type)

默认值(Default)

例子(Example)

相关属性(Related)

百度站内搜索

Google站内搜索

博客分类

赞助我们