How to hide rows instead of remove them from the DOM?

jstolpe

When using the search box and filtering out content, I want the rows to be hidden instead of removed from the DOM because I need to update those rows which are hidden. When they are removed from the DOM I cant update those rows. Is this possible with datatables? If not, are there any workarounds?

allan

There is no option to have them display:none rather than removing them from the DOM. However, that doesn't mean that they can't be updated - the row().data() method (and others) will still work just fine on hidden rows.

Allan

jstolpe

Thanks for the reply, I am trying your .data() solution to update a cell but no luck, when I update the row data for a certain cell and call draw() on the table, the cell does not get updated here is my jsfiddle https://jsfiddle.net/xybjLugo/12/. Also is this the way to update table cells to make sure hidden and non hidden cells are updated? Use the .data() function and then call the draw() function to update the table or is there a better way? Thanks for the help!

allan

It is possible to do it that way - you need to use rows().invalidate() to tell DataTables that the data has changed since it doesn't monitor the data for changes.

However, I think a better way would be to use the cell().data() API: https://jsfiddle.net/xybjLugo/14/ .

It is worth highlighting that data() is not the same as row().data() which is not the same as cell().data()...!

Allan

jLinux

I ran into the same issue you did, was thinking it would be easier to update it in the DOM rather than using the DT API, but eventually I took advantage of the API, and im glad I did, its actually much easier via the API