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

最低支持版本:DataTables 1.10


描述(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 选项分离到其他自己的主题文件中 )

  • 标记语言(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)能够被初始化:

  • 未来走向

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

类型(Type)

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

默认值(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;
}

相关属性(Related)

下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。

Options

https://datatables.net/reference/option/dom

Translation from DataTables.net, with permission

百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……