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。