How to add a class to a new row in a jquery datata

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

Answer 1

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"
}]

Answer 2

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

Answer 3

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.

Answer 4

After reading the documentation this work for me:

var my_dataTable = $('#my-table').DataTable();
my_dataTable.row.add( [
                'Hello',
                'Hello2',
                'Hello3',
                'Hello4'
            ] ).draw().nodes().to$().addClass("my_class");

Answer 5

Alright, perhaps I'm not understanding exactly what your question is, but if you were just adding the row, why not set the class before you add it? Like this, somewhat sloppy, example:

jQuery("<tr />")
  .html(your_var_containing_the_interior_dom)
  .addClass("yourClass")
  .appendTo(jQuery("#yourTable"))

Answer 6

This should do the trick:

var r = t.row.add( [
    ....
] ).node();
$(r).css({"color":"red"});