Datatables add class to row after creation

Question

I'm using Datatables and trying to highlight row(s) based on other input that can be set after the table was created. Wasn't able to use the createdrow callback and I'm not sure it is good for this purpose because it used for the creation while I need it after.

I can do it with javascript, but thought maybe there is better option with the datatables properties/function.

https://jsfiddle.net/lironco/52pcza0r/

$(document).ready( function () {
    $('#myTableId').DataTable();
} );

function itemSelected(sel) {
    var opts = [];
    var len = sel.options.length;
    for (var i = 0; i < len; i++) {
        if (sel.options[i].selected) {
        opts.push(sel.options[i].value);
    }
}

var table = document.getElementById("myTableId");
   for (var r = 0; r < table.rows.length; r++) {

        if(opts.indexOf(table.rows[r].cells[0].innerHTML) >= 0){
            table.rows[r].cells[0].classList.add('highlithRow');
            table.rows[r].cells[1].classList.add('highlithRow');
        }
        else{
            table.rows[r].cells[0].classList.remove('highlithRow');
            table.rows[r].cells[1].classList.remove('highlithRow');
       }
    }
}

andrewJames · Accepted Answer · 2021-02-19 13:37:41Z

3

Assuming you have assigned your table to a variable, like this...

var table = $('#myTableId').DataTable();

And you have a table which looks like this (to help you visualize what the code is doing):

...then you can use the DataTables API to iterate over all rows in the table, and access each <tr> node, and also the related row data:

table.rows().every( function () {
  rowNode = this.node();
  rowData = this.data();
  if (rowData.office === 'Tokyo') {
    $(rowNode).addClass( 'highlightme' ); 
  }
} );

This assumes your row data was provided as objects {...},{...},... - for example, from your source JSON.

If the data was already provided in the HTML table, or if each row was provided as an array [...],[...]..., then you need to access the data cells using indexes:

if (rowData[2] === 'Tokyo') {

The end result is that all the <tr> elements for Tokyo rows now have the highlightme class added to them:

<tr role="row" class="odd highlightme">
  <td class="sorting_1">Airi Satou</td>
  <td>Tokyo</td>
  <td>Tokyo</td>
  <td>Accountant</td>
  <td>2008/11/28</td>
  <td>$162,700</td>
</tr>

answered Feb 19, 2021 at 13:37

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liron C Over a year ago

Thanks. Is there any advantage for using your solution over iterating directly the table rows (as I posted in the question)?

andrewJames Over a year ago

If your table uses pagination, then the approach in the question will only operate on the visible (rendered) rows. Using the DataTables API means you will access every row in the DataTable - rendered or not. The same point applies to data filtering also.

It's after midnight · Accepted Answer · 2021-02-19 07:44:39Z

2

Add a callback function inside the initialization method:

$(document).ready( function () {
    $('#myTableId').DataTable( {
        "createdRow": function ( row, data, index ) {
            if (data[1] == 200) {
                $('td', row).eq(1).addClass("highlithRow");
            }
        }
    } );
} );

You can read more about it here: https://datatables.net/examples/advanced_init/row_callback.html

answered Feb 19, 2021 at 7:44

It's after midnight

311 bronze badge

1 Comment

Liron C Over a year ago

It won't work in my case , because I want to highlight the row due to change in other section (Nothing not being changed in the table). See the fiddle link I added

Collectives™ on Stack Overflow

Datatables add class to row after creation

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related