24

実際、私はjQueryデータテーブルプラグインが初めてです。

このコードを使用してこのメ​​ソッドを使用して、プラグインをテーブルにアタッチしました。

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

ここで必要なのは、datatables がフィルター文字列を入力できるテキスト ボックスを提供し、結果がフィルター処理されることです。

そのため、UIに新しいテキストボックスを追加したくありません。だから私はこのリンクを通った

http://datatables.net/examples/basic_init/dom.html

しかし、私は理解していません。既存のテキストボックスを使用することは可能ですか。ご意見をお聞かせください

このデータテーブルを実装する前に、このような状況にあったことを確認してください

ここに画像の説明を入力

このデータ テーブル プラグインを適用すると、検索用に新しいテキスト ボックスが追加されます。新しいテキスト ボックスは必要ありません。既存のテキスト ボックスに検索機能を実装したいと考えています。

4

8 に答える 8

63

これは非常に簡単です。まず、デフォルトの検索ボックスを非表示にする必要があります:

.dataTables_filter {
   display: none;
}

HTML のどこかに配置された、独自に設計された検索ボックスの例:

<input type="text" id="searchbox">

検索ボックスに入力するときに検索/フィルタリングするスクリプト

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});

実際のデモ -> http://jsfiddle.net/TbrtF/

DataTables 1.10 を使用している場合、JS は次のようになります。

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});
于 2013-10-09T15:54:31.697 に答える
17

新しい要素を定義newSearchPlaceして、内部にデータ テーブル検索フィルターを含めることができます。

<div id="newSearchPlace"></div>

次に、この新しい場所内に検索フィルターを配置します。

$("#newSearchPlace").html($(".dataTables_filter"));
于 2016-02-16T14:07:19.793 に答える
7

フィルター オプションを削除するには、他の回答で述べたように css を使用するか、次を使用してデータテーブルの初期化で削除できます。

$("#table").dataTable({"bFilter": false}); //disables filter input

または、sDom次のような属性を使用して:

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

その他のオプションについては、 http://datatables.net/usage/options#sDomを参照してください。

keypress独自のテキスト フィールドをフィルター ボックスとして使用するには、それにハンドラーをアタッチし、次のfnFilterようなオプションを使用します。

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });
于 2013-10-10T06:03:24.410 に答える
1

css を使用すると、検索入力のスタイルを非常に簡単に変更できます。

css ファイル内:

.dataTables_filter input {
     background: blue;
}

Javascript あり

$(".dataTables_filter input").css({ "background" :"blue" });

これをコンソールに貼り付けて試してみてください。

于 2013-10-09T14:14:15.673 に答える
0

はい、CSS で次のようなクラスを作成できます。

.pull-left{
    float: left !important;
}

次に、jqueryまたはjavascriptを使用して、このクラスをデータテーブル検索divに追加します。

例：

$('.dataTables_filter').addClass('pull-left');

スクリプトが html の head 部分にあることを確認してください。

于 2017-01-06T00:59:14.530 に答える