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

Hurtless

doubt it'll really help, but done. I've tried many other things, but without results. – Hurtless

or is there a way i can simply add an html row, to the datatable via the datatables functions – Hurtless

Answer 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.

Lather

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

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

Lasley

Answer 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++;
}

Nichollenicholls

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

Chris

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

Answer 5

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

Espinosa

Answer 6

This should do the trick:

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

Bodwell

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

Answer 7

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

Kowalewski

Answer 8

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

Ppm