Datatables hide/show class in rows

Question

I am trying to toggle the visibility of some divs or spans in my Datatables rows (I cannot work with hiding/showing columns) when an event is triggered.

here is approximatly my script https://jsfiddle.net/pxLmth7f/

I have a DataTables table with 500 rows.\

<button class="btn btn-primary" id="testbutton">hide/show</button>

<table id="tableUserTest" class="dataTable" style="width:100%">
  <thead>
    <tr>
      <th>column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>7958<span class="table-evo">some stuff</span></td>
    </tr>
    <!-- many more rows -->
  </tbody>
</table>

Each row contains a span.table-evo inside (the one I am trying to toggle)\

$(document).ready(function() {
  $("#testbutton").on("click", function(e) {
    $(".table-evo").toggle();
  });
  $('#tableUserTest').DataTable();

});

I have a button to toggle this class, which triggers event.

Awaited result : all rows get their span.table-evo toggled. However it only affects the visible rows.

I've read that it's not good to directly use jquery to change Datatables instance, however I was unable to find a solution without using hiding/showing columns from the api, and same on stackoverflow :(

Any help welcome :)

cheers

Without details to hand: look at the datatables row render callback. When it renders the row, hide/show as required. Alternatively, if this is for all rows in the table, then add a class to the table's parent div and use css. Example: jsfiddle.net/wLuyohdj — fdomn-m
– fdomn-m, Commented Feb 16, 2021 at 12:11
@freedomn-m thanks for the advice, I actually didn't think about this simple trick, but it works fine ! — Clem Mi
– Clem Mi, Commented Feb 16, 2021 at 18:52

andrewJames · Accepted Answer · 2021-02-16 14:40:31Z

You can use the DataTables API as follows:

$("#testbutton").on("click", function(e) {
  var nodes = myTable.cells( ':has(.table-evo)' ).nodes().to$();
  $(".table-evo", nodes).toggle();
});

The myTable variable assumes you have defined your DataTable and assigned it to a variable:

var myTable = $('#tableUserTest').DataTable( {...} );

The following command...

myTable.cells( ':has(.table-evo)' )

...selects all those DataTables cell which contain any child elements having the table_evo class. DataTables supports jQuery selectors in this function.

The nodes() function then selects the <td> DOM nodes for those DataTable cells.

This operates across the entire data set in your DataTable - not just the rendered DOM elements which are on the current page. This is important, as it means we are operating on the whole set of nodes we need to toggle - even those which are not displayed, due to DataTables paging.

The to$() function converts these DOM nodes into jQuery objects.

After that, you can perform the toggle() on the class in the selected nodes: $(".table-evo", nodes).toggle().

Collectives™ on Stack Overflow

Datatables hide/show class in rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related