CODEWITHSUNDEEP
jquerydatatablesaddclass
Pierluc
Pierluc

Reputation: 395

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

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

Upvotes: 10

Views: 34424

Answers (8)

Etienne Prothon
Etienne Prothon

Reputation: 1082

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

Upvotes: 1

d.danailov
d.danailov

Reputation: 9800

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

Upvotes: 3

Vasil Karpachev
Vasil Karpachev

Reputation: 119

This should do the trick:

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

Upvotes: 1

user1191811
user1191811

Reputation: 131

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

Upvotes: 9

Johnny Oshika
Johnny Oshika

Reputation: 57482

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.

Upvotes: 19

George SEDRA
George SEDRA

Reputation: 786

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

Upvotes: 2

Diablo
Diablo

Reputation: 3418

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

Upvotes: 4

jasonpgignac
jasonpgignac

Reputation: 2306

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

Upvotes: -4

Related Questions