How to add a class to a new row in a jquery datatables?

Question

How can I add a class to the row I'm adding in the datatable?

If not possible, how can I use fnRowCallback or fnDrawCallback to change the class?

oTable = $('#example').dataTable( {
  "bJQueryUI": true,
  "bSortClasses": false,
  "sDom":'T<"clear">',
  "sPaginationType": "full_numbers",
  "sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
  "fnRowCallback": function( nRow, aData, iDisplayIndex ) {

    var oSettings = oTable.fnSettings();
    oSettings.aoData[iDisplayIndex].nTr.className = "gradeX odd";
  }
});

The above code is giving me an error.

this is how I add the row:

oTable.fnAddData(arr);

Solution 1

Try changing your fnRowCallback to the following:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  nRow.className = "gradeX odd";
  return nRow;
}

You can refer to the offical documentation to further understanding this callback function.

Solution 2

You can add the classname in your data itself as described in the documentation.

http://www.datatables.net/examples/server_side/ids.html

use DT_RowId for adding id for any row
use DT_RowClass for adding class for any row
use DT_RowData for adding html5 data object to any row

eg:

"data": [ {
"DT_RowId": "row_5",
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
}]

Solution 3

Try this:

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var id = aData[0];
            $(nRow).attr("id",id);
            if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
            {
                $(nRow).addClass('row_selected');
            }
            return nRow;
}

For adding row to datatable try this code from :

http://datatables.net/examples/api/add_row.html

/* Global var for counter */
var giCount = 1;

$(document).ready(function() {
    $('#example').dataTable();
} );

function fnClickAddRow() {
    $('#example').dataTable().fnAddData( [
        giCount+".1",
        giCount+".2",
        giCount+".3",
        giCount+".4" ] );

    giCount++;
}

Solution 4

Official documentation says:

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

table
    .rows.add( [
        new Pupil( 43 ),
        new Pupil( 67 ),
        new Pupil( 102 )
    ] )
    .draw()
    .nodes()
    .to$()
    .addClass( 'new' );

Please read: rows.add()

Solution 5

$(document).ready(function() {
    oTable = $('#table_id').dataTable( {"fnInitComplete": after_init} );
} );
function after_init(){
    $("#table_id tbody tr").addClass("gradeA");
}

View more solutions

Comments

[rhigdon]

Best solution I found. I wanted to add a class to a specific column instead of the row. $($(nRow).children()[1]).attr('class', 'status-indicator');

[Jamie Poole]

I don't know why this is down-voted, this solves the problem (except it's adding inline CSS) To add a class using this technique just change $(r).css to $(r).addClass('class');

[Etienne Prothon]

This code is for multiple row look at mine for single row.