web-dev-qa-db-ja.com

データテーブル内の検索ボックスのDOM要素の位置を変更する

実際、jQuery datatablesプラグインは初めてです。

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

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

ここで必要なのは、データテーブルにフィルターボックスを入力できるテキストボックスがあり、結果がフィルターされることです。

そのため、既存の設計されたテキストボックスをその目的に使用したいので、UIに新しいテキストボックスを追加したくありません。だから私はこのリンクを通過しました

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

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

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

enter image description here

このdatatablesプラグインを適用すると、検索用の新しいテキストボックスが追加されます。新しいテキストボックスにはしたくない既存のテキストボックスに検索機能を実装します。

javascriptjquerycssdatatablesjquery-datatables
18
Nikhil Agrawal

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

.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();
});
53
davidkonrad

フィルターオプションを削除するには、他の回答に記載されているように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() );
     });
 });
5
MaVRoSCy

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

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

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

$("#newSearchPlace").html($(".dataTables_filter"));
5
mtoloo

あなたはCSSで検索入力のスタイルを非常に簡単に変更できます

cssファイル内：

.dataTables_filter input {
     background: blue;
}

JavaScriptを使用

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

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

1
Cracker0dks

2018年12月の実際のバージョン（v1.10.19）の場合、次の手順を実行する必要があります。

  1. デフォルトの検索ボックス（CSS）を非表示にします。

    .dataTables_filter { display: none; }

  2. 希望の場所に新しいフィルターを追加（HTML）

    Search:<br><input type="text" id="searchFilter">

  3. DataTablesの初期化関数の後、検索関数（JS）を記述する必要があります。

    $(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

注：fnfilterは非推奨であるため、search（）を使用しますが、search（）はテーブルを再描画しないため、draw（）も使用する必要があります。

1
culter

DataTables 1.10の時点で、domプロパティを初期化に追加できます。マスターするのは非常に困難ですが、<div>要素内のすべてのDataTablesオブジェクトをラップして、組み込みのテーブルコントロール要素をスタイルするために使用できます。

次のようなdomプロパティは、デフォルトの検索バーを選択した<div>でラップします。これは、左に引くために使用できます（（fはフィルタリング/検索バーであり、tはテーブルです：

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

出力：

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>

詳細： DataTables dom option

0
GuillaumeCleme

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

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

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

例：

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

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

0
Mack Mack