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

回答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.

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

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

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

回答5:

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

回答6:

This should do the trick:

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

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

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

来源：https://stackoverflow.com/questions/3214039/how-to-add-a-class-to-a-new-row-in-a-jquery-datatables

标签

jquery

datatables

addclass