API

DataTables及其扩展具有一个广泛的API,可用于访问表中包含的数据,并在初始化完成后以其他方式操作表。 DataTables API旨在反映表中的数据结构,以及通常希望与表进行交互的方式。因此,该API由用于处理表及其数据的六个关键区域组成

  • 单元格
  • 核心
  • 实用程序

扩展插件还可以向API添加其他方法,公开它们添加到DataTable中的特性和功能。

有关API中可用方法的完整列表,请参阅API参考部分

术语

为了使API文档简洁,使用了许多术语来描述或引用API的各个方面。这些定义在这里

  • 实例-API的实例是引用一组特定DataTable表(即new Api()的结果)的单个对象实例。
  • 结果集-API实例保存的数据。 DataTables API实例“类似数组”,因为它们以与普通Javascript数组相同的方式保存数据(因此可以使用数组[]表示法访问数据),并且具有许多相同可用方法(例如sort()push())。这与jQuery在本质上类似数组的方式非常相似。
  • 上下文-API实例的上下文描述API实例与其链接的DataTable。每个API实例可以引用一个或多个DataTable表,并能够对这些表执行操作(有关详细信息,请参见下文)。

访问API

可以通过四种不同方式之一为一个或多个表获取新的DataTables API实例

  • $( selector ).DataTable();
  • $( selector ).dataTable().api();
  • new $.fn.dataTable.Api( selector );
  • new DataTable( selector, options );自版本1.11起。

每个结果都是DataTables API对象的实例,其上下文中是选择器找到的表。

需要注意的是 $( selector ).DataTable()$( selector ).dataTable() 的区别。前者返回一个 DataTables API 实例,而后者则返回一个 jQuery 对象。已向 jQuery 对象添加了 api() 方法,以便您轻松访问 API,但 jQuery 对象对操作表格节点非常有用,就像对任何其他 jQuery 实例所做的那样(如使用 addClass() 等)。

链式调用

与 jQuery 类似,DataTables API 广泛使用链式调用,许多 DataTables 方法(但并非全部)都返回 API 实例本身,以便您可以立即调用另一个 API 方法。例如

var table = $('#example').DataTable();

table.search( 'Fiona' ).draw();

它通过在一行中调用两种不同的 API 方法 search()draw() 来使用这两种方法。它也可以写成

var table = $('#example').DataTable();

table.search( 'Fiona' );
table.draw();

在这种情况下,功能是相同的,但链式调用可以实现更简洁、更具表现力的代码。

与 jQuery 的链式调用方法不同,DataTables API 使用了嵌套方法和属性。例如,ajax.json() 方法可让您访问从 DataTables 发出的 Ajax 调用中的最新 JSON 数据——在这种情况下,json() 方法是 ajax 属性的子级。同样地,columns()(和其他数据操作方法)提供了自己的链式调用子级方法。例如,columns().visible()。这使得 API 在访问数据的方式上非常具有表现力,因为方法与之前调用过的内容相关。

API 的所有顶级方法始终可用,并且在 API 嵌套的任何级别均可用。例如,draw() 是一种顶级方法,但在从表格中删除了一行后,可以调用它:table.row( selector ).remove().draw();

请注意,并非所有方法都会返回一个 API 实例用于链式调用。在某些情况下,返回 API 实例用于链式调用是不合适的,比如 cell().node() 用于获取 td/ th 元素。API 参考文档 包含每种方法的详细信息及其返回值。

多张表格

DataTables API 实例可以在其上下文中涉及多张表格。该 API 将上下文中每张表格同等对待。例如,

var tables = $('.dataTable').DataTable();

tables.page( 'next' ).draw( false );

此代码将选择文档中所有包含 dataTable 类的表格,并将其全部跳转到其下一页数据显示(使用 page())。

同样,如果需要,API 实例可以涉及单个表格,只需更改用于创建 API 实例的 jQuery 选择器即可:例如,$('#myTable').DataTable(); 将创建一个 API 实例,其中只包含一张表格。

复数 / 单数

在使用 API 时你会注意到,这些方法大量使用复数和单数术语。虽然在 API 中这是相对少见的,但这样做是为了反映你在表中访问数据的方式 - 例如,rows().data() 将返回一个 API 实例,其结果集中包含已选行的数据(即,就像一个数组一样),而 row().data() 将仅返回该行的这些数据。这样做使得使用 API 更加直观,因为你始终会获得期望的结果。

为了清楚起见,在英语中(对于我们的国际用户)

  • 单数 === 1
  • 复数 > 1

因此,如果你想使用其中一个选择器方法选择多项,请使用该方法的复数形式。如果你想选择一个特定的单项,请使用单数形式。

示例 - 列筛选器

API 参考文档包含了每个 API 方法的示例,以及对它所做的操作、它返回的内容以及它接受哪些参数的详细描述;但让我们将以上描述的概念组织成一个详细的、逐行示例,以说明如何使用 DataTables API。在本例中,我们在表格中每列的页脚单元格中创建一个 select 元素,其中包含该列的数据,并且将用于搜索表格。

var table = $('#example').DataTable();

table.columns().flatten().each( function ( colIdx ) {
    // Create the select list and search operation
    var select = $('<select />')
        .appendTo(
            table.column(colIdx).footer()
        )
        .on( 'change', function () {
            table
                .column( colIdx )
                .search( $(this).val() )
                .draw();
        } );

    // Get the search data for the first column and add to the select list
    table
        .column( colIdx )
        .cache( 'search' )
        .sort()
        .unique()
        .each( function ( d ) {
            select.append( $('<option value="'+d+'">'+d+'</option>') );
        } );
} );
  • 第 1 行 - 获取一个 DataTables API 实例,其中包含其上下文中的一张表格
  • 第 3 行 - 使用 columns() 方法选择表格中的所有列。使用 flatten()columns() 的 2D 数组返回减少为列索引的 1D 数组,并使用工具方法 each() 对每个选定的列执行操作。
  • 第 5 行 - 为列的筛选器创建 select 元素
  • 第 7 行 - 使用 column().footer() 方法获取页脚单元格元素,以便插入选择输入。
  • 第 9 行 - 使用 jQuery on() 方法在 select 元素的值更改时执行操作 - 在本例中为搜索表格。
  • 第 10 - 13 行 - 使用 column().search() 将搜索排队,并对结果进行 draw() 链式处理,以为更新表格的显示。
  • 第 17 - 19 行 - 使用 column().cache() 方法获取 DataTables 使用的列数据,以搜索表格。
  • 第 20 - 21 行 - 使用工具方法 sort()unique() 将数据减少为有条理的列表,你想将其呈现给你的最终用户。
  • 第 22-24 行 - 搜索项选项添加到了我们的 select 列表中,可以随时使用。

正如您所见,DataTables API 极其灵活,并为访问和操作表格提供了范围广泛的选项。请参阅 API 参考文档 以获取可用方法的完整列表。此外,诸如 Editor 等插件可以通过自定义方法(例如 row().edit()cell().edit())和其他选项扩展 API。