web-dev-qa-db-ja.com

jquery dataTablesプラグインは、並べ替え/フィルタリング後に代替行の色を尊重できますか？

jquery datatables plugin を使用しています。これは、通常のhtmlテーブルを取得し、並べ替え、フィルタリング、ページングなどを追加するための便利なプラグインのようです

私が見る1つの問題は、検索すると「奇数」/「偶数」行クラスが更新されないようですので、テーブルに100行がありますが、フィルタリングすると10がある場合、10すべてが同じバックカラーである可能性がありますまたは8は同じ背景色です

列で並べ替えた後、同じ背景色で行の束を「束ねる」可能性がある列で並べ替えた後、同じ問題が発生します。

とにかく、datatablesプラグインがフィルターの後に偶数/奇数のスタイルを再適用できるので、フィルタリングの対象に関係なく、常に代替行のバックカラーがありますか？

jquerysortingjquery-pluginsdatatablesstyling
21
leora

原因

この機能はデフォルトで使用可能です。ほとんどの場合、この異常な動作の理由は次のとおりです。

  • cSSのoddおよびevenクラスをオーバーライドするか、または
  • フィルタリング後のコードはテーブル構造に影響します

ソリューション＃1

  1. デフォルトのスタイリング または jQuery UI または Foundation

    以下に示すように、<table>にクラスdisplayを使用します。使用可能なすべてのクラスのリストについては、 デフォルトのスタイリングオプション を参照してください。

    <table id="example" class="display" cellspacing="0" width="100%">

    デモンストレーションについては、 this jsFiddle を参照してください。

  2. Bootstrap

    以下に示すように、table table-striped table-borderedにクラス<table>を使用します。

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

    デモンストレーションについては、 this jsFiddle を参照してください。

ソリューション＃2

oddおよびevenクラスをオーバーライドするCSSルールがある場合、jQuery DataTablesに stripeClasses オプションで代わりに代替クラスを使用するように指示できます。

$('#example').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );
23
Gyrocode.com

これをアーカイブするには、 基本スタイル-スタイリングクラスなしdatatableを使用して、tabletagからデータテーブルクラスを削除する必要があります。

この後、odd（たとえばmyodd）およびeven（e.g myeven）行に対して独自のクラスを作成します。

次のタスクは、これらのクラスを各テーブル描画テーブルのテーブル行に適用することです。

1。フィルターが適用される場合

2。可視レコードの制限が変更された場合など.

これを行うには、datatabeがrowCallback()を提供します。これは次のように使用できます。

 $('#myTabel').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                 $(row).addClass('myeven');
            }
          }
    });

ご注意ください：

避けるために !important in css rule定義css rule for odd、even行は次のようになります。

table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}

デモ：http://jsfiddle.net/ishandemon/4za80xky/

16
PHP Worm...

私のこのコメントは、Jquery Datatable行クラスを削除または変更する方法に適用できます

Datatablesは、 1.10+ documentation で定義された名前のオプションのjsonパラメーターを提供するようになりました。

したがって、奇数の偶数クラスを完全に削除する場合、テーブルの初期化中に次のパラメータを使用します。

$('#example').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

soDatatablesのすべての行にカスタムcssクラスを適用する場合。

$('#example').dataTable( {
  "stripeClasses": ['yourRowClass']
} );

複数のCSSクラスを適用する場合（奇数または偶数の方法）、これらのクラスがn行ごとに繰り返されるように完了したら、これを使用します

$('#example').dataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
} );

DataTablesは各クラスを順番に適用し、必要に応じてループします。

2
vibs2006

これは古いことは知っていますが、上記のソリューションを拡張する必要がありました。ユーザーがストライプの色を調整できるようにしているので、次のことをしなければなりませんでした。

rowCallback: (row, data, index) => {
  const stripeColor = this.options.stripeColor;

  if (index % 2 == 0) {
    $(row).removeClass('odd-row even-row');
    $(row).addClass('odd-row');

    if (!!this.options.stripe) {
      $(row).css({ background: 'transparent' })
    }
  } else {

    $(row).removeClass('odd-row even-row');
    $(row).addClass('even-row');

    if (!!this.options.stripe) {
      $(row).css({ background: stripeColor })
    }
  }
},
0
stevenlacerda