我正在使用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>
在页面加载时,我想触发行上的click事件,其中data-user-id
匹配动态生成的用户ID列表。为了这个问题,如何在data-user-id
为4287的行上触发click事件?请记住,由于Datatables分页,DOM中可能不存在该行 - 仅在Datatables变量中 - 所以我需要一个利用Datatables API的解决方案。
使用事件委托
$("#user_table tbody").on('click', 'tr[data-user-id="4287"]', function () {
// Series of actions here
}).click(); // trigger the click
我已经解决了类似的问题,但我只选择了一行。这就是我做到的。这将查看所有行,甚至可以直接页面到行自动存在的页面。不能完全解决您的问题,但可能会指出您正确的方向。
从这样的脚本开始:
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作为列传递并且不显示它,那么你可以使用上面的内容,否则它将不太适合你的需要。
这将选择包含所需变量的所有行。我没有测试过多个值到你调用的脚本中,但它应该适用于一些调整。
虽然这是一个迟到的答案,你可以使用initComplete
的数据表选项;
DataTable({
...
"initComplete": function() {
$("DOM element").click(); // or
$("DOM element").trigger("click");
},
...
});
$("#user_table tbody tr[data-inst='50821'] td.details-pmt-control").click();
这种方法对我有用,它会生成click事件(在我的情况下,在行内的特定td)。在tr中你看到我必须添加“data-inst”属性来找到正确的行。在准备数据表并将事件连接到它之后放置此行。