API 集成

Select 为最终用户提供了一个界面，允许他们通过点击表格元素来选择项目。 这是最终用户真正需要了解的关于该软件的一切，但它只讲述了一半的故事！ 你，作为程序员，需要知道何时选择了项目，并且需要能够检索这些项目来处理该选择！

这可以通过 DataTables API 来完成，Select 对其进行了扩展，使这些操作成为可能。

检索已选项目

DataTables 有三种主要方法可以从 DataTable 中获取项目（以及三种匹配的单个项目）

• rows() 和 row() 用于选择行
• columns() 和 column() 用于选择列
• cells() 和 cell() 用于选择单元格

每种方法都有自己可以用来选择特定项目的选项，但它们都提供将 selector-modifier 选项传递进去的选项。 此选项用于告诉 API 如何排序和过滤可以从中选择的项目。 Select 通过在 selector-modifier 对象中添加 selected 选项来扩展此功能。 当为 true 时，它将返回选定的项目，当为 false 时，它将返回未选定的项目。 如果为 undefined，它将不执行任何操作。

例如，考虑以下内容

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

table.rows( { selected: true } ).data();

这将检索任何已选行的所有数据（使用 rows().data()）。 如果需要，我们可以使用其他 selector-modifier 选项来扩展此功能

table
    .rows( {
        selected: true,
        page: 'current'
    } )
    .nodes();

在这种情况下，将返回当前页上已选项目的行节点 (rows().nodes()）。

当然，这可以与常规行选择器结合使用

table.rows( '.important', { selected: true } ).data();

将获取同时具有 important 类的任何已选行的所有数据。

类似地，我们可以对其他表格选择 API 方法执行类似的操作 - 例如

table.cells( { selected: true } ).data();

如果使用单元格选择选项，则获取已选的单元格。

在使用 API 和已选行时，值得注意的是 any() 和 count() 辅助方法对于了解是否选择以及选择了多少项目很有用。

项目选择

除了能够使用 DataTables API 检索已选项目之外，还可以使用 API 来选择和取消选择项目。 这是通过使用以下复数函数及其单数对应项来完成的

• rows().select() / rows().deselect()
• columns().select() / columns().deselect()
• cells().select() / cells().deselect()

例如，要选择所有具有 important 类的行，请使用

table.rows( '.important' ).select();

这也可用于实现您自己的项目选择界面，如果您更愿意这样做，而不是使用 Select 提供的选项。 例如，考虑以下内容

$('#myTable').on( 'click', 'tbody tr', function () {
    if ( table.row( this, { selected: true } ).any() ) {
        table.row( this ).deselect();
    }
    else {
        table.row( this ).select();
    }
} );

此代码将切换表格中行的选择状态。 行逐行解释

• 第 1 行 - 将委托事件侦听器附加到表格中的行
• 第 2 行 - 检查行是否已选中
• 第 3 行 - 如果已选中，则取消选中它
• 第 6 行 - 如果未选中，则选中它

事件

谜题的最后一块是了解何时选择了项目。 这是通过 Select 发出的事件来完成的 - 具体来说是 select 和 deselect 事件。 这些事件可以使用标准的 DataTables 事件模型 来监听。

在使用 Select 时，使用 Buttons 扩展 用于 DataTables 也很自然 - 允许用户选择项目，然后单击按钮以对这些项目触发操作。

Select 提供了 selected 和 selectedSingle 按钮供 Buttons 使用，这些按钮可以用来在选择了项目时轻松地提供您自己的操作。 当没有选中项目时，这些按钮会自动停用（在 selectedSingle 的情况下，当选中了多个项目时也是如此），当选中项目时，这些按钮会激活。

例如，考虑以下内容，它使用 selected 按钮简单地告诉您选择了多少行

$('#myTable').DataTable( {
    select: true,
    buttons: [
        {
            extend: 'selected',
            action: function ( e, dt, node, config ) {
                var rows = dt.rows( { selected: true } ).count();

                alert( 'There are '+rows+'(s) selected in the table' );
            }
        }
    ]
} );