DataTables: How to set classes to table row 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

回答1:

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

回答2:

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.

回答3:

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

回答4:

  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