DataTables:如何将类设置为表行单元格(但不是表格单元格!)

Question

我的桌子风格非常好.

{抱歉链接不再工作}

我不得不添加sClass,以便新行(由fnAddData添加)获得正确的类.

不幸的是,这会破坏我的布局,因为这些类也被添加到我的表格标题单元格中!

{抱歉链接不再工作}

如何配置sClass仅适用于TBODY单元？

澄清:

  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

这样我打电话的时候

rolesTable.fnAddData( { 
    "id": 10, 
    "name": "testname", 
    "module": "testmodule", 
    "description": "testdescription" 
} );

然后添加的行看起来像这样:

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

那是完全OK

**问题是**此设置还将这些类添加到:

<thead>
    <tr> (...) </tr>
</thead>

桌头细胞......我不想要

Answer 1

我的问题的解决方案是:使用fnRowCallback而不是sClass将类设置为新行.

  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

Answer 2

由于您只使用sClass将样式应用于表,因此解决问题的简单方法是将CSS本身修改为仅应用于td元素.

旧CSS风格:

.avo-light {
    color: blue;
}

新的CSS风格:

td.avo-light {
    color: blue;
}

这样,尽管sClass也应用于元素,但CSS只会影响您感兴趣应用样式的单元格.

我意识到这个问题有点陈旧,但我发现它比最佳解决方案更加模块化.