如何使用jquery触发dataTable搜索窗格的onclick事件？

Question

在 DataTables 中，有搜索窗格工具。 我想在页面加载时触发它。 过滤器应从 url 中通过的 arguments 中选择。

我有代码将从 URL 中提取过滤器的行值，它将 select 所有在 url 中传递的行都将突出显示它不会应用的行，但它只是在过滤器中的实际选择（和表的数据保持原样）。

我的选择行代码如下所示：

if(str1 == str2) {
  $(this).addClass("selected");
  if(!$("#DataTables_Table_"+id+"_wrapper").hasClass('dtsp-selected')) {
    $("#DataTables_Table_"+id+"_wrapper").addClass('dtsp-selected');
  }
}

这里“str1”是从 url 传递的字符串，“str2”是在 searchpanes 表中匹配的字符串。 “id”是搜索窗格表的 id。 通过使用此代码，可以选择正确的行，但未应用实际过滤器。

我正在寻找一个触发事件，该事件将在添加 select class 后应用过滤器。

Answer 1

在 DataTables 中， SearchPanes扩展在后台使用Select扩展来管理过滤器值的选择。 事实上，每个搜索窗格本身就是一个使用Select扩展名的 DataTable 实例。 当您直接添加 DataTable 特定的类 ( dtsp-selected ) 以以编程方式触发过滤时，实际上是短路了 DataTable 的Select扩展，您应该改为使用它的 API （请参阅此处的一般文档）。

因此，您需要首先获取窗格的 DataTable 实例。 它会是这样的：

var panes = document.querySelectorAll('.dtsp-searchPanes table.dataTable');
var pane1DataTable = $(panes[0]).DataTable();

您现在可以利用 rows().every() 方法（请参阅此处的方法文档）来遍历窗格行。 一旦您到达您想要 select 的特定行，请使用row().select()方法（请参阅此处的方法文档），因此您会得到如下内容：

pane1DataTable.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    // here the context is the row
    // perform you logic to check if the row must be selected then:
    this.select();
} );