web-dev-qa-db-ja.com

スタイルごとに各クラスにカスタムクラスを指定TD-Datatables＆jQuery

サーバー側のデータをテーブルに表示するために datatables を使用しています。

個々のセルをターゲットにしてスタイルを設定できません（<TD>）しかし。私は少し検索して、それが可能かもしれないことを見つけました：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
    ....
}

...しかし、テーブルがいくつかあり、すべての列と行の数が同じではないため、どのようにすればよいのかよくわかりません。 「列」のすべてのTDsに共通のクラスを与えたい。

javascriptjquerydatatableshtml-table
51
3zzy

列定義でsClassパラメーターを使用できます。たとえば、3つの列があり、2番目と3番目の列にカスタムクラスを渡す場合、次のことができます。

"aoColumns": [
    null,
    { "sWidth": "95px", "sClass": "datatables_action" },
    { "sWidth": "45px", "sClass": "datatables_action" }
]

datatables documentation を確認できます

45
Lukasz Koziara

columnDefsを使用して、各列のクラスを定義できます。

coffeescriptの例：

$('table').dataTable(
  columnDefs: [
    {
      targets: -1 # targets last column, use 0 for first column
      className: 'last-column'
    }
  ]
);

これは新しいAPI 1.10以降を使用しています。

12
jmarceli

fnRowCallbackを検索するときにこの質問を見つけて、静的cssクラスを使用するのではなく、セルの内容に基づいてスタイルを追加したい場合は、fnRowCallbackを使用するとうまくいきます。

oTable = $('#matrix').dataTable({
  ...
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    for (var i in aData)  {

      // Check if a cell contains data in the following format:
      // '[state] content'
      if (aData[i].substring(0,1)=='[') {

        // remove the state part from the content and use the given state as CSS class
        var stateName= aData[i].substring(1,aData[i].indexOf(']'));
        var content= aData[i].substring(aData[i].indexOf(']')+1);
        $('td:eq('+i+')', nRow).html(content).addClass(stateName);
      }
    }
  }
});

これが将来の訪問者に役立つことを願っています:-)

12
SaschaM78

DataTables 1.10+構文 を使用して、createdCellを使用してそれを行う方法を次に示します。このアプローチの利点は、セルを条件付きでスタイル設定できることです。

"columnDefs": [
{
        "targets": [16],
        "createdCell": function(td, cellData, rowData, row, col) {
            switch(cellData) {
            case "Pending":
                $(td).addClass('pending');
                break;
            case "Rejected":
                $(td).addClass('rejected');
                break;
            case "Approved":
                $(td).addClass('approved');
                break;
            case "SAP":
                $(td).addClass('sap');
                break;
            case "Reconciled":
                $(td).addClass('reconciled');
                break;
            }
        }
    }
],
9
devlin carnate

コールバック内の行または個々のセルをターゲットにしたい場合：

var table = $('#order-history-table').DataTable(
    {
        "ajax": url,
        "pageLength": 20,
        "createdRow": function( row, data, dataIndex ) {

            // Add a class to the cell in the second column
            $(row).children(':nth-child(2)').addClass('text-justify');

            // Add a class to the row
            $(row).addClass('important');
        }
    }
);

「createdCells」パラメーターを機能させることができなかったため、行を介して実行する必要がありました。

7
omarjebari
var table = $('#order-history-table').DataTable(
    {
        "ajax": url,
        "pageLength": 20,
        "createdRow": function( row, data, dataIndex ) {
            // Add a class to the cell in the second column
            $(row).children(':nth-child(2)').addClass('text-justify');
            // Add a class to the row
            $(row).addClass('important');
        }
    }
);
0
Karthik