Add a class to cell data yet to be drawn

traslerk

If i click the first row on the first page and then shift click the last row on the last page I'll select all cells... e.g. 10 rows on a page, 5 pages = 50 rows selected.

I then want to clear all the information in the same column so I use .every()

 table.rows({ selected: true }).every(function (idx, tableLoop, rowLoop) {
                this.cell(idx, 8).data('');
                this.cell(idx, 8).nodes().to$().addClass('myClass');
            });

This clears all the information (50 rows in column 8) from the datatable BUT it only creates a class on the first and last pages (I presume as those cells have actually been drawn). All the pages between that have not actually been drawn don't get the class added.

So there is only 20 cells with the 'myClass' on.

Really need to get this (or alternative) method working.

Any Ideas?

rf1234

That's an interesting one! Just an idea, I don't know whether this will work.
Using to$ might not be the right thing here (because it converts the API instance into a jQuery object). That might explain why the data manipulation works and adding the class doesn't. You might want to try this

table.rows({ selected: true }).every(function (idx, tableLoop, rowLoop) {
               this.cell(idx, 8).data('');
               $(this.cell(idx, 8).node()).addClass('myClass');
           });

Similar to this example: https://datatables.net/reference/api/cells().every()

I changed nodes() to node() as per the example.

Not sure about the difference between to$ and this: https://datatables.net/reference/api/$() but maybe worth giving it a try.

This part of the description makes me optimistic that it might work:
"DataTables makes heavy use of DOM manipulation, removing rows from the document for paging and searching, and removing columns from the document for column visibility, among other actions. jQuery will not find these removed DOM elements when using a standard jQuery statement since it uses the document as the root element and some nodes under DataTables' control have been removed from the document."

allan

Are you using deferRender? If so, that's the issue - the other cells haven't been created yet.

Allan

traslerk

Hi Allan

This sorted the issue out. I'm not sure if this has had a knock on effect to anything else as I can't remember why I had this in the first place.

Thanks for your help

traslerk

Hi rf1234

I tried changing the to$ to the approach you suggested. I still only worked on cells that had been created at some point. However, when I changed the deferRender to false your method did also work.

Appreciate the assistance.

allan

Its basically to help speed things up. If you don't need the DOM nodes created straight away, deferRender will defer them until they are needed. If you do need them immediately, drop that option as you have done.

Allan