jQuery datatables add class to tr

Question

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');
        }
    }
});

Why aren't you doing $(row).addClass(...)? If row is a tr itself, $('tr', row) (or $(row).find('tr')) will only find nested trs. — Kenney
– Kenney, Commented Sep 17, 2015 at 21:35
heh, I thought I tried $(row).addClass("label-warning"); without success... now it works. :-} — 7 Reeds
– 7 Reeds, Commented Sep 17, 2015 at 21:45

Ozan · Accepted Answer · 2015-09-17 21:35:05Z

71

$('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");

answered Sep 17, 2015 at 21:35

Ozan

3,7492 gold badges21 silver badges23 bronze badges

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

1 Comment

7 Reeds Over a year ago

Thanks, as above I thought I had done this but I must have been making some other error. Thanks

Roko C. Buljan · Accepted Answer · 2019-04-18 12:35:50Z

39

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');
    }
} );

edited Apr 18, 2019 at 12:35

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Mar 15, 2018 at 10:14

Zymawy

1,62517 silver badges17 bronze badges

1 Comment

TroySteven Over a year ago

If you don't want the first TD but just want to add a class to your tr use this line: $(row).addClass('asset-context box');

Nick Tsai · Accepted Answer · 2017-09-05 11:02:40Z

14

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');

edited Sep 5, 2017 at 11:02

answered Sep 5, 2017 at 10:55

Nick Tsai

4,20937 silver badges37 bronze badges

Comments

Adel Mourad · Accepted Answer · 2022-05-30 06:56:52Z

12

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

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

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

edited May 30, 2022 at 6:56

answered Nov 6, 2019 at 13:40

Adel Mourad

1,57317 silver badges16 bronze badges

3 Comments

ricks Over a year ago

This adds it to the <td> not the <tr>

vsam Over a year ago

is any way to change the classname based on data into render function? so first define a default Classname and then in render function check if data is not valid change the classname

Adel Mourad Over a year ago

@vsam in this case you may wrap and cell contents inside a div or so and set the class name on it rather on the cell - the td - itself

Majid Basirati · Accepted Answer · 2018-12-25 12:52:23Z

5

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.

answered Dec 25, 2018 at 12:52

Majid Basirati

2,9053 gold badges28 silver badges47 bronze badges

Comments

Majid Basirati · Accepted Answer · 2021-12-14 05:52:51Z

0

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');
}

answered Dec 14, 2021 at 5:52

Majid Basirati

2,9053 gold badges28 silver badges47 bronze badges

Comments

Dan Greenfield · Accepted Answer · 2023-04-28 03:55:51Z

0

You can also use the stripeClasses option, which is used to set the row classname for the odd and even stripes.

stripeClasses: ['odd align-middle', 'even align-middle'],

In this example, I have attached the bootstrap 'align-middle' class to the original stripe classes, to vertically align the text within each row.

Ref: https://datatables.net/reference/option/stripeClasses

answered Apr 28, 2023 at 3:55

Dan Greenfield

11 bronze badge

Collectives™ on Stack Overflow

jQuery datatables add class to tr

7 Answers 7

1 Comment

1 Comment

DataTable().row.add() situation:

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

DataTable().row.add() situation:

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related