DataTables: How to set classes to table row cells (but not to table header cells!)

datatables, javascript

Solution

Solution to my problem was: useing fnRowCallback instead of sClass to set classes to new rows.

  var rolesTable = $('#roles').dataTable({
      "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "name" },
        { "mDataProp": "module" },
        { "mDataProp": "description" },
        { "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' }, 
      ],
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
          $('td:eq(0)', nRow).addClass( "avo-lime-h avo-heading-white" );
          $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass( "avo-light" );
        }
  }); // end od dataTable

Problem

i have a really nice style for my tables. { sorry links no more working } I had to add sClass so that new rows (added by fnAddData) get the right classes. Unfortunately that ruins my layout, becouse these classes are also added to my table-header cells! { sorry links no more working } How can I configure sClass to apply only for TBODY cells? To clarify: ``` var rolesTable = $('#roles').dataTable({ "aoColumns": [ { "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" }, { "mDataProp": "name", "sClass": "avo-light" }, { "mDataProp": "module", "sClass": "avo-light" }, { "mDataProp": "description", "sClass": "avo-light" }, { "mDataProp": null, "bSearchable": false, "bSortable": false, "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' }, ], }); // end od dataTable ``` This way when i call ``` rolesTable.fnAddData( { "id": 10, "name": "testname", "module": "testmodule", "description": "testdescription" } ); ``` then the added row looks like this: ``` <tr> <td class="avo-lime-h avo-heading-white">10</td> <td class="avo-light">testname</td> <td class="avo-light">testmodule</td> <td class="avo-light">testdescription</td> <td></td> </tr> ``` AND that is perfectly OK ** the problem is ** that this setting also adds these classes to: ``` <thead> <tr> (...) </tr> </thead> ``` table head cells... which I do not want

Original source