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

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

Answers


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

Since you are only using sClass to apply styling to the table the simple solution to your problem is to modify the CSS itself to only apply to the td elements.

Old CSS style:

.avo-light {
    color: blue;
}

New CSS style:

td.avo-light {
    color: blue;
}

This way the CSS will only effect the cells you are interested in applying the style to despite sClass being applied to th elements as well.

I realize this question is a little old, but I find it substantially more modular than the best solution.


Set the default classes before.

$.fn.dataTableExt.oStdClasses.sStripeOdd = '';

$.fn.dataTableExt.oStdClasses.sStripeEven = '';

For further references see here http://www.datatables.net/styling/custom_classes


  let table = $("#myTable").dataTable();
  table.rows().every(function(rowIdx, tableLoop, rowLoop){
    $(this.node().cells[0]).addClass('red');
    $(this.node().cells[1]).addClass('blue');
  }

After the table is rendered, iterate through all rows with the JavaScript selector of each row and make whatever changes you want. This addresses the performance concerns brought up by gamliela in loostr's answer. DataTables rows().every() documentation


Need Your Help

Deadlock situation in threads?

java multithreading

want to know what is deadlock condition in threads, because in many of the books i studied how to avoid deadlock situation, i just want to know what is deadlock situation and a example code for that?

Preferring EqualityComparer<T> to IEqualityComparer<T>

c# .net

From the IEqualityComparer&lt;T&gt; remarks section on MSDN: