4

jquery データ テーブル スタイル (ここでは滑らかさ) では、行が異なる色で表示されます。各行に表示される色は何によって決定されますか? どうすればこれを変更できますか？ダウンロードパックの例から、以下の例を参照してください。

ここに画像の説明を入力

4

2 に答える 2

2

あはは…答えが見つかりました。サーバーテーブルの行からの元のhtmlドキュメントでは、最後の列にあるデータに応じてクラスが異なるように設定されています。

<tr class="gradeC">

次に、datatable() 関数がそのジョブを実行した後に、結果の html を表示できます。クラス文字列に偶数または奇数を追加します。お気に入り

<tr class="gradeC odd">

列をソートすると、ソート関数はその列のセルのクラス文字列に「sorting_1」を追加します。

すべての色は、次のように css ファイルに設定されています。

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeC { background-color: #ddddff; }
table.display tr.even.gradeC { background-color: #eeeeff; }
table.display tr.odd.gradeX { background-color: #ffdddd; }
table.display tr.even.gradeX { background-color: #ffeeee; }
table.display tr.odd.gradeU { background-color: #ddd; }
table.display tr.even.gradeU { background-color: #eee; }

tr.odd { background-color: #E2E4FF; }
tr.even { background-color: white; }

tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; }
tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; }
tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; }
tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; }
tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; }
tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; }
tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; }
tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; }
tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; }
tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; }
tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; }
tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; }
tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; }
tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; }
tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; }
tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; }
tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; }
tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; }
tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; }
tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; }
tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; }
tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; }
tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; }
tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; }
于 2013-09-06T11:34:32.450 に答える
0

この場合、次のクラスを使用して特定の色が適用されます。gradeA、gradeB、gradeCなど..何らかの方法で動的に生成されたのか、jQuery Theme Roller を使用したのかはわかりません。スタイルを生成するためにテーマローラーを使用したと思います。とにかく..カスタムクラスオプションを使用してクラスをテーブルに追加するだけです。

ここを参照してください: https://datatables.net/styling/custom_classes

そして、そこから次のようなことができるはずです:

oTable = $('#example').dataTable( {  
    "aoColumns" : [     
        {  sClass: "myCustomClass" }  
    ]});

-と-

table.display tr.even.myCustomClass { background-color: #ffdddd; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }

これはやや似た質問です：

スタイリングのために各 TD にカスタム クラスを与える - Datatables & jQuery

そして、これはフィルター付きのものです：

データテーブルはフィルターにクラスを追加します

于 2013-09-05T21:29:51.557 に答える