Clear CSS from cells 2 and 3

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
How can I clear/remove a CSS class from cells 2 and 3 of each row?
I can do this from within rowCallback or rowCreated but not sure how to do it from a jQuery function.

Created this way:

rowCallback: function (row, data, index) {
    if (data.BINCODE_COUNT > 1) {
        $('td:eq(1)', row).removeClass('alertRow').addClass('duplicateBincode');
        $('td:eq(2)', row).removeClass('alertRow').addClass('duplicateBincode');
    }

At some point, I need to remove duplicateBincode class from these cells in each row.

kthorngren

I'm guessing what you want is something like this:

rowCallback: function (row, data, index) {
    if (data.BINCODE_COUNT > 1) {
        $('td:eq(1)', row).removeClass('alertRow').addClass('duplicateBincode');
        $('td:eq(2)', row).removeClass('alertRow').addClass('duplicateBincode');
    } else {
        $('td:eq(1)', row).removeClass('duplicateBincode');
        $('td:eq(2)', row).removeClass('duplicateBincode');
    }
},

If this doesn't help then please describe when and what conditions you want to remove the class duplicateBincode.

Kevin

NoBullMan

Thank you Kevin.
I was trying to avoid reloading the table as there are a lot of data and abit time consuming. Reloading the table would do it as the condition to apply the style would no longer be true.

I thought maybe there is a way to use the reference to datatable and remove the css from the rows. Something maybe along the lines of:

myTable.rows().every(function (rowIdx, tableLoop, rowLoop) {
    // remove css class from cells 2 and 3 of each row.
}

Apparently, these don't work:

this.removeClass('duplicateBincode');
$(this.node()).removeClass('duplicateBincode');

kthorngren

rowCallback executes each draw event (search, sort, page) against the rows that are displayed on the page. I was thinking that data.BINCODE_COUNT might change and you would want to update the classes based on the change. For the change to take affect you would call draw(). createdRow is different in that it only runs once when each row as its created.

If you just want to remove the class from the whole table I think this will work:

myTable..rows().nodes().to$().removeClass('duplicateBincode');

It uses rows().nodes() to get all the -tag trelements.-api to$()` converts the result into a jQuery object that you can use jQuery removeClass().

You could loop through with rows().every() if you want to do some comparisons, for example:

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var data = this.data();
    
    if ( ... ) {
        var node = this.node();
        $( node ).removeClass('duplicateBincode');
    }
} );

Kevin

NoBullMan

Hi Kevin
wouldn't these attempt to remove the class from the rows instead of the certain cells within each row? I think these options attempt to remove a class from tr rather than td.
That's how the class is assigned: to cell 2 and 3 of certain rows and not the entire row.

    $('td:eq(1)', row).removeClass('alertRow').addClass('duplicateBincode');
    $('td:eq(2)', row).removeClass('alertRow').addClass('duplicateBincode');

Also, the second example you provided is same as one of my attempts that did not work. You mentioned:

var node = this.node();
$(node).removeClass('duplicateBincode');

and I had tried:

$(this.node()).removeClass('duplicateBincode');

kthorngren

Yes you are right. You can do the same with column().nodes(). Look at the example in the docs.

Kevin

NoBullMan

I found that either of below two methods works; it also removes the select checbok from column 1. I couldn't find an easy way, or any way, of using column() API.

tblOpenBins.rows(".row_" + binCode).every(function (rowIdx, tableLoop, rowLoop) {
    $('td:eq(1)', this.node()).removeClass('duplicateBincode');
    $('td:eq(2)', this.node()).removeClass('duplicateBincode');
    $('td:eq(0)', this.node()).removeClass('select-checkbox');

    tblOpenBins.cell(rowIdx, 1).to$().removeClass('duplicateBincode')
    tblOpenBins.cell(rowIdx, 2).to$().removeClass('duplicateBincode')
    tblOpenBins.cell(rowIdx, 0).to$().removeClass('select-checkbox')

Thank you for your help and your patience. It is much appreciated.

kthorngren

Doing this didn't work?

table
    .column( 1 )
    .nodes()
    .to$()      // Convert to a jQuery object
    .removeClass( 'duplicateBincode' );

Repeat for the other columns.

Kevin

kthorngren

Also you probably can use columns().nodes() to removeClass() from both columns. Note the addition of flatten() in the example. Use columns( 1,2 ] ).nodes().....

Kevin