1

私は DataTables を使用していますが、驚くほどうまく機能しています。列ヘッダー (ヘッダーの任意の場所) をクリックすると、ソートされるようになりました。そして、昇順と降順を切り替えます。しかし、ここでの要求は、ヘッダー全体をアクティブなトリガーにするのではなく、昇順で並べ替えるボタンと降順に並べ替えるボタンの 2 つの異なるボタンを用意することです。

各ヘッダーに追加して独自のボタンを追加する必要がありますか、それともデータテーブルに組み込まれているものがありませんか。

独自のボタンを追加する必要がある場合は、正しい方向に向けていただければ幸いです。

どうもありがとう！

4

2 に答える 2

1

ここでのポイントがソート用のデフォルトのアイコンを変更するだけの場合は、このクラスを上書きできます

.sorting_asc {
  background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}

.sorting_desc {
  background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}
于 2015-02-17T23:48:16.517 に答える
1

残念ながら、jquery dataTables には、これに対する組み込み機能はありません。しかし、実装は非常に簡単です。手順は次のとおりです。

1 ) デフォルトのヘッダー アイコンを削除します。1.10.x では、この CSS を使用します。

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background: none;
}

2）空白のワードラップと醜いアウトラインも削除します

th {
  white-space: nowrap;
  outline: none;
}

3）ボタンをスタイルするクラスを作成します

.sort-btn {
   padding: 0px;
   float: right;
   font-size: 10px;
}

4 ) dataTable を初期化した後、<th>'s を繰り返します。それぞれについて、デフォルトのクリック イベントのバインドを解除し、.ascと.descボタンを追加し、ボタンごとに列を昇順または降順で並べ替えるためのイベントを挿入します。

$('#example th').each(function(index, th) {
  $(th).unbind('click');
  $(th).append('<button class="sort-btn btn-asc">&#9650;</button>');
  $(th).append('<button class="sort-btn btn-desc">&#9660;</button>');

  $(th).find('.btn-asc').click(function() {
     table.column(index).order('asc').draw();
  }); 
  $(th).find('.btn-desc').click(function() {
     table.column(index).order('desc').draw();      
  }); 
});

5 ) 結果は次のようになります。 ここに画像の説明を入力

デモ -> http://jsfiddle.net/wyLzgjv5/

于 2015-02-21T19:16:58.077 に答える