How to apply Css class to a row using datatables.js?

Question

I have retrieved table from SQL procedure contains column with name of class that is to be applied on that particular row.
However that table is passed to datatable.js as a data-source. Now with my code, specified class is getting applied to only one cell: in fnRowCallback() function. I want is to apply that class to entire row.

Here is my `javascript` code:

var dataSet = JSON.parse("[" + a.toString() + "]")    
$(document).ready(function () {
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,                
        "columns": [
                        { "title": "Center" },
                        { "title": "Call Executive" },
                        { "title": "Name" },
                        { "title": "Mobile" },
                        { "title": "Phone" },
                        { "title": "Status" },
                        { "title": "Appt Date" },
                        { "title": "Joined Date" },
                        { "title": "Remark" },
                        { "title": "Source" },
                        { "title": "Publisher" },
                        { "title": "css" },
                      ]
                      ,
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            if (aData["css"] == "gradeC") {
                $(nRow).addClass('gradeC');
            }
            else {
                $(nRow).addClass('gradeN');
            }
        }

    });
});

Sample Datatable string (class is specified in last column) passed to function is:

    var dataSet = ['Dadar', 'lmsSenitaD', 'Atul salaskar', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Come back and Join', 'Mobile', 'Times','gradeC'],
['Aundh', 'Rashmi', 'Preeti Gupta', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Will Discuss with Family', 'Online Campaign', 'Iksula','gradeN'],
['Do@Home_Thane', 'Rashmi', 'Mitali Gupta', '9876543210', '', 'Joined - Old Date', '10/01/2014', '20/08/2014', 'Come back and Join', 'Online Campaign', 'Iksula','gradeC'];

There's nothing wrong with your code in fnRowCallback so the problem must be in the data. Can you add Console.log(aData['css']) to confirm that the correct data is returned? — markpsmith
– markpsmith, Commented Nov 25, 2014 at 10:20

dreyescat · Accepted Answer · 2014-11-25 11:08:46Z

8

I think the problem comes from what you think you get in aData. When the fnRowCallback callback is called aData is not an object with the key corresponding to the column titles. It is just the data (array) corresponding to that row. Exactly the same arrays as the one you passed in the dataSet. So, if you want to get the css column you need to know the index of that column in you array. It seems easy in your case because it happens to be the last one. So you can do something like this to get the css class name:

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    var css = aData[aData.length - 1];
    if (css == "gradeC") {
        $(nRow).addClass('gradeC');
    }
    else {
        $(nRow).addClass('gradeN');
    }
}

Or if you want to apply whatever class contained in the css column:

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    $(nRow).addClass(aData[aData.length - 1]);
}

See demo.

answered Nov 25, 2014 at 11:08

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

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

1 Comment

Vikrant Over a year ago

You got exact Answer :)

Frank · Accepted Answer · 2014-11-25 10:12:00Z

1

You could use the DataTables createdRow event to add a class (just as their example, except you would add the class in one of the row's fields)

See http://www.datatables.net/examples/advanced_init/row_callback.html for an example

The value for that specific row can be gotten from the data array. For example, if the class is in column 5, add the class to the row

$(document).ready(function() {
    $('#example').dataTable( {
        "createdRow": function ( row, data, index ) {
            $(row).addClass(data[5]);
        }
    } );
} );

edited Nov 25, 2014 at 10:12

answered Nov 25, 2014 at 9:58

Frank

1061 silver badge3 bronze badges

1 Comment

Vikrant Over a year ago

In this question, Class is retrieved from JS string only. Then how to apply that, using your suggestion... Mention clearly please!

sman0307 · Accepted Answer · 2014-11-25 09:57:36Z

0

If it were pulling from a database the data would have a primary key, and therefore just use getElementbyId and apply the appropriate styling

document.getElementById("dataSetID")

answered Nov 25, 2014 at 9:57

sman0307

3083 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to apply Css class to a row using datatables.js?

Here is my `javascript` code:

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is my javascript code:

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Here is my `javascript` code: