CODEWITHSUNDEEP
searchchildrenresponsivedatatables-1.10expandable
lbriquet
lbriquet

Reputation: 541

Datatables 1.10 Responsive search expand to show child rows

I'm using Datatables 1.10 with the Responsive extension with column controlled child rows. https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

How can I configure the search so that child rows which match are expanded/visible?

For example, on this page if I search for "5407" the table is filtered to show the parent row, but the match is only found in the child row. How can I get the search result to expand to show the matching child row?

https://jsfiddle.net/lbriquet/Ldgutob0/

$(document).ready(function() {
  $('#example').DataTable({
    responsive: {
      details: {
        type: 'column'
      }
    },
    columnDefs: [{
      className: 'control',
      orderable: false,
      targets: 0
    }],
    order: [1, 'asc']
  });
});

Upvotes: 0

Views: 1301

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

You can automatically open all child rows after a search in a search.dt handler :

$('#example').on('search.dt', function() {
  table
   .rows({ filter: "applied" })
   .every(function(rowIdx, tableLoop, rowLoop) {
     $('td:first-child', this.node()).trigger('click.dtr');
   })
})

Updated fiddle -> https://jsfiddle.net/Ldgutob0/2/ Each time a filter / search is processed all visible rows will get its child row opened. I noticed the .dtr suffix by investigating the code, it is just a namespace I believe is abbreviation of "dataTables responsive", good to know if there is custom click handlers you not want to accidently get involved by a trigger().

This will of course open any child row regardless the filtered value is actually present in hidden or visible columns.

Upvotes: 0

Related Questions