17

私のテーブルには本当に素敵なスタイルがあります。

{申し訳ありませんリンクはもう機能していません}

(fnAddData によって追加された) 新しい行が適切なクラスを取得するように、sClass を追加する必要がありました。

残念ながら、これらのクラスはテーブルヘッダーセルにも追加されるため、レイアウトが台無しになります!

{申し訳ありませんリンクはもう機能していません}

TBODY セルのみに適用されるように sClass を構成するにはどうすればよいですか?

明確にするために：

  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>

テーブル ヘッド セル...これは必要ありません

4

4 に答える 4

30

私の問題の解決策は、 sClass の代わりに fnRowCallback を使用して、クラスを新しい行に設定することでした。

  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
于 2012-06-11T21:14:03.023 に答える
2

前にデフォルトのクラスを設定します。

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

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

詳細については、 http://www.datatables.net/styling/custom_classesを参照して ください。

于 2013-04-23T07:55:00.647 に答える
2 
  let table = $("#myTable").dataTable();
  table.rows().every(function(rowIdx, tableLoop, rowLoop){
    $(this.node().cells[0]).addClass('red');
    $(this.node().cells[1]).addClass('blue');
  }

テーブルがレンダリングされたら、各行の JavaScript セレクターを使用してすべての行を反復し、必要な変更を行います。これは、loostr の回答で gamliela によって提起されたパフォーマンスの問題に対処します。DataTables rows().every() ドキュメント

于 2016-09-26T19:46:54.877 に答える