0

http://datatables.net/apiにあるJqueryデータテーブルプラグインを使用しています。プラグインは独自の検索ボックスを生成し、有効になっている場合は初期化時にページに挿入します。検索ボックスが作成されると、次のように独自のdivにネストされます。

<div>
    <!-- search code -->
</div>
<table>
    <!-- table data -->
</table>

検索ボックスを動かさずにテーブルにスクロールバーを表示して、常に表示されるようにしたい。オーバーフロー-y：スクロール; テーブル要素では機能しないようですが、divでは機能します。そうですか？親コンテナにスタイルを適用すると、ユーザーが下にスクロールしても検索ボックスが表示されません。要素を自分で目的の設定に物理的に移動してみました。

<div>
    <!-- Search Code -->
</div>
<div style="overflow-y:scroll;"> <!-- actually in a class but this shows what it is. -->
    <table>
        <!-- table data -->
    </table>
</div>

予想通り、プラグインで生成された検索ボックスが壊れます。だから私の質問は、プラグインの組み込みの検索機能を使用して、おそらく「sdom」のような引数を使用して、望ましい結果を達成できるか、それとも弾丸を噛んで自分の検索/フィルター機能をロールする必要があるかということです。

4

1 に答える 1

0

私が見つけた解決策は、組み込みのフィルターをオフにして、好きな場所に配置できる独自の同等のフィルターを作成することでした。

http://jsfiddle.net/KwXby/5/

$(document).ready(function(){
  $("#tableFilter").bind("change keyup", function(){
  var tableRows = $('.dataTable:visible').find('tbody').find('tr');
  var filterText = $(this).val();
  $(tableRows).each(function() {
    if ($(this).text().indexOf(filterText ) >= 0) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  });
});

編集：後で、スペースで区切られた検索語を使用して複数の列を検索し、見つからない場合は空のテーブル行を提供できるようにする必要があることに気付きました。これにより、更新が必要になります。

http://jsfiddle.net/KwXby/11/

于 2013-09-27T09:13:29.007 に答える