Question

我正在使用Datatables 1.10.7。我有一个用Datatables初始化的表，如下所示：

var user_table = $("#user_table").DataTable({
    "bInfo":false,
    "bLengthChange":false
});

当有人点击该表中的一行时，我编写的代码会触发一系列事件：

$("#user_table tbody").on('click', 'tr', function () {
    // Series of actions here
});

我的#user_table有这样的行：

<tr data-user-id="4287">
    <td>Jane Smith</td>
    <td>Senior VP</td>
</tr>
<tr data-user-id="2442">
    <td>John Doe</td>
    <td>HR Manager</td>
</tr>

在页面加载时，我想在data-user-id匹配动态生成的用户ID列表的行上触发click事件。为了这个问题，如何在data-user-id为4287的行上触发click事件？请记住，由于Datatables分页，DOM中可能不存在该行 - 仅在Datatables变量中 - 所以我需要一个使用Datatables API的解决方案。

Answer 1

使用事件委派，如

$("#user_table tbody").on('click', 'tr[data-user-id="4287"]', function () {
    // Series of actions here
}).click(); // trigger the click

Answer 2

我已经解决了与此类似的问题，但我只选择了一行。我是怎么做到的。这将查看所有行，甚至可以直接页面到行自动存在的页面。不能完全解决您的问题，但可能会指出您正确的方向。

从这样的脚本开始：

 jQuery.fn.dataTable.Api.register( 'selectData()', function ( data, dataPoint ) {
    var table = this;

    this.rows({order:'current'}).iterator( 'row', function (ctx, idx, t, i) {
      if ( table.row(idx).data()[dataPoint] === data ) {
        var page = Math.floor( i / table.page.info().length );
        table.page( page ).draw( false );

        // Select row using TableTools
        var tt = $.fn.dataTable.TableTools.fnGetInstance( table.table().node() );
        tt.fnSelect( table.row(idx).node() );
      }
    } );

    return this;
} );

并致电：

$('#user_table').DataTable().selectData( row_value, 'column name' );

您可以使用类似的方式获取所选行，并为您提供所有选定行的数组：

var selected_things =[];
$("#user_table tbody").on('click', 'tr', function () {
selected_things.push(table.row( this ).data() );
});

在上面row_value应该是您根据传递到表中的JSON值定义的变量。 'column name'应该是表格中列的名称。关于做这项工作的建议是将用户ID作为列传递，而不是＆＃39;显示它，然后您可以使用上述，否则它不太适合您的需要。

这将选择包含所需变量的所有行。我没有测试过将多个值传递到您调用的脚本中，但它应该可以进行一些调整。

Answer 3

虽然这是一个迟到的答案，但您可以使用initComplete个数据表选项;

DataTable({
    ...
    "initComplete": function() {
        $("DOM element").click(); // or
        $("DOM element").trigger("click");
    },
...
});

Answer 4

$("#user_table tbody tr[data-inst='50821'] td.details-pmt-control").click();

这种方法对我有用，它会生成click事件（在我的情况下是行中特定的td）。如您所见，在tr中，我必须添加“ data-inst”属性以找到正确的行。在准备数据表并将事件连接到它之后放置此行。

使用行的数据属性通过jquery触发Datatables行上的click事件

4 个答案: