DataTables：如何为表行单元格设置类（但不设置表头单元格！） [英] DataTables: How to set classes to table row cells (but not to table header cells!)

问题描述

我的餐桌风格非常好。

{很抱歉，链接不再有效}

我必须添加sClass，以便新行（由fnAddData添加）获得正确的类。

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!

{很抱歉，链接不再有效}

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

How can I configure sClass to apply only for TBODY cells?

要澄清：

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

然后添加的行如下所示：

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>

这完全是确定

**问题是**该设置还将这些类添加到：

** the problem is ** that this setting also adds these classes to:

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

表头单元...我不想要

table head cells... which I do not want

推荐答案

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

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

这篇关于DataTables：如何为表行单元格设置类（但不设置表头单元格！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！