How to trigger onclick event of searchpanes of dataTable using jquery?

Question

In DataTables, there are searchpanes facility. I want to triger it on page load. Filter should be selected from arguments which are passed in url.

I have code that will extract value of rows for filter from URL and it will select all the rows those are passed in url, but it is only selection of the rows(I mean it will only highlight that row, in actual filter is not applied and Data of the table remain as it is).

My code of selecting row is shown below:

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

here "str1" is string passed from url and "str2" is string that match in searchpanes table. "id" is searchpane table's id. By using this code, selection of correct row is working but actual filter is not applied.

I am looking for a trigger event that will apply filter after adding select class.

Answer 1

In DataTables, the SearchPanes extension uses the Select extension under the hood to manage the selection of filter values. In fact, each search pane is itself a DataTable instance using the Select extension. When you directly add the DataTable-specific classes ( dtsp-selected ) for programmatically triggering the filtering, you actually short-circuit DataTable's Select extension, what you should do instead is use its API (see general documentation here ).

So what you need to do is first get the DataTable instances of the panes. It would be something like this:

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

You can now leverage the rows().every() method (see method doc here ) to loop through the pane rows. And once you get to a specific row you want to select, use the row().select() method (see method doc here ), so you get something like this:

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();
} );