jQuery datatables add class to tr

JavascriptJqueryDatatables

Javascript Problem Overview


I am using jQuery and datatables. I want to add a class to the TR element of a particular row. I know how to find the row. The console.dir(row); shows the row object and that starts with a tr element. I can't get the jQuery selector to do anything though. What am I missing?

table = $('#resultTable').DataTable({
    aaSorting: [],
    ajax: {...},
    columnDefs: [...],
    createdRow: function (row, data, index) {
        //
        // if the second column cell is blank apply special formatting
        //
        if (data[1] == "") {
            console.dir(row);
            $('tr', row).addClass('label-warning');
        }
    }
});

Javascript Solutions


Solution 1 - Javascript

$('tr', row) is looking for a tr element in the context of row, meaning it will search for a tr element inside the row provided as context parameter.

According to API, this should work

$(row).addClass("label-warning");

Solution 2 - Javascript

You would just have to use the createdRow

$('#data-table').DataTable( {
    createdRow: function( row, data, dataIndex ) {
        // Set the data-status attribute, and add a class
        $( row ).find('td:eq(0)')
            .attr('data-status', data.status ? 'locked' : 'unlocked')
            .addClass('asset-context box');
    }
} );

Solution 3 - Javascript

DataTable().row.add() situation:

If you want to add class when using row add function in Datatables, you could get the TR-DOM from node() method:

var datatable = $('#resultTable').DataTable();
   
var trDOM = datatable.row.add( [
    "Col-1",
    "Col-2"
] ).draw().node();
  
$( trDOM ).addClass('myClass');

Solution 4 - Javascript

To set a class name on the <tr> use this calback

createdRow: function (row, data, dataIndex) {
	$(row).addClass('some-class-name');
},

ref: https://datatables.net/reference/option/createdRow

To set a class on the <td> use

"columns": [
{ 
	data:"",
	className: "my_class",
	render: function (data, type, row) { return "..."; }
},
{ 
	data:"",
	className: "my_class",
	render: function (data, type, row) { return "..."; }
},
//...
]

Something similar for 'columnDefs'

ref: https://datatables.net/reference/option/columns.className

To set the Id attribute on the row <tr> use:

//.... 
rowId: "ShipmentId",
columns: [...],
//....

Solution 5 - Javascript

Also you can add class to tr by pass through json data that you send to datatable. It's enough that every json item has DT_RowClass.
For example:

{
	
	DT_RowAttr = new
	{
	   attr1 = "1",
	   attr2 = "2"
	}
	DT_RowClass = "majid",
	DT_RowId = "rowId"

}  

In this example DT_RowId value apply to id attribute of any tr tag and DT_RowAttr value apply some custom attribute to tr tag.

Solution 6 - Javascript

Another solution:

createdRow: function (row,data) {
    var stsId = data.Ise_Sts_Cost_ID;
    if (stsId == 3)
        $(row).addClass('table-warning');
    else if (stsId == 4)
        $(row).addClass('table-success');
    else
        $(row).addClass('table-danger');
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question7 ReedsView Question on Stackoverflow
Solution 1 - JavascriptOzanView Answer on Stackoverflow
Solution 2 - JavascriptZymawyView Answer on Stackoverflow
Solution 3 - JavascriptNick TsaiView Answer on Stackoverflow
Solution 4 - JavascriptAdel MouradView Answer on Stackoverflow
Solution 5 - JavascriptMajid BasiratiView Answer on Stackoverflow
Solution 6 - JavascriptMajid BasiratiView Answer on Stackoverflow