CODEWITHSUNDEEP
javascriptjquerycssdatatables
Adhik
Adhik

Reputation: 156

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

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

Upvotes: 2

Views: 21223

Answers (3)

dreyescat
dreyescat

Reputation: 13818

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.

Upvotes: 8

Frank
Frank

Reputation: 106

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

Upvotes: 1

sman0307
sman0307

Reputation: 308

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")

Upvotes: 0

Related Questions