データテーブル-データテーブル外の検索ボックス


回答:


240

DataTables APIを使用してテーブルをフィルタリングできます。したがって、必要なのは、DataTablesへのフィルター関数をトリガーするキーアップイベントを持つ独自の入力フィールドだけです。cssまたはjqueryを使用すると、既存の検索入力フィールドを非表示/削除できます。あるいは、DataTablesには、それを削除する/含めない設定があるかもしれません。

これに関するDatatables APIドキュメントをチェックアウトしてください。

例:

HTML

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

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

8
あなたは間違いなくそうでなければ、結果の遅延を経験するだろう、.keypressの代わりに.keyup使用する必要があります
Sævar

1
これを見つける前に、私は約1時間私の入力を混乱させ$(".dataTables_filter :input").focus().val(value).keypress();ましたkeyup。ただし、APIを使用することはありません。エレガントなソリューションです。
MattSizzle 2014年

3
JSは、fnFilterの代わりに.search($(this).val()).draw()を使用するように変更する必要があります。参照:datatables.net/manual/api#Chainingこの回答を修正して修正しましたが、最初にピアレビューを行う必要があるようです。
シェーングラント

13
備考:「searching:true」オプションは引き続き必要ですが、おそらくデフォルトの検索ボックスを非表示にしたいので、sDOMオプションをnullに設定します。
2014年

8
小さな "d"で$()。dataTable()をインスタンス化すると、DataTables APIインスタンスではなくjQueryオブジェクトが返されます。後者は、「oTable = $( '#myTable')。DataTable();」を呼び出すことで実現できます。大文字の「D」で。これは.searchを呼び出せるようにするために必要です(それ以外の場合は「関数未定義」エラーがスローされます)。参照:datatables.net/faqs/#api
Lionel

34

@lvkzコメントによると:

大文字のdでデータテーブルを使用している場合.DataTable()(これはDatatable APIオブジェクトを返します)これを使用します。

 oTable.search($(this).val()).draw() ;

@netbrainの回答です。

小文字のdでデータテーブルを使用している場合.dataTable()(これはjqueryオブジェクトを返します)これを使用します。

 oTable.fnFilter($(this).val());

4
oTable.fnFilter($(this).val());私も働いた
shabeer90 2015年

10
どちらのメソッドも有効です。データテーブルの呼び出し方法によって異なります。`oTable.search($(this).val())。draw(); `呼び出すときに使用します.DataTable()oTable.fnFilter($(this).val());あなたが使用する場合.dataTable() の違いを首都Dにあります。
Lvkz

データテーブルバージョン1.10.5の「oTable.fnFilterは関数ではありません」エラー
Ege Bayrak

:ちょうどjQueryを使ってあなたも、このようなアクセスデータベースのAPIができることを考え出しoTable.api().search($(this).val()).draw();それはあなたが改ページを手動で制御したい場合は特に有用であることができlength、同様:oTable.api().page.len($(this).val()).draw();
GHIS

15

このためのsDomオプションを使用できます。

独自のdivに検索入力があるデフォルト:

sDom: '<"search-box"r>lftip'

jQuery UIを使用する場合(にbjQueryUI設定true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

上記は、実際のテーブルの外にあるという名前のクラスを持つinput独自の中に検索/フィルタリング要素を配置します。divsearch-box

特別な省略構文を使用していますが、実際には、スローしたHTMLをすべて取り込むことができます。


@Marcus:実際にはsDomはエレガントではないように感じます。検索ボックスを完全にカスタマイズできない(そのボックスにハードコードの「検索」テキストがある)という事実は別として。
–HoàngLong 2013

しかし、まだdiv.datatables_Wrapperの内部にありますが、それを外部に移動する方法はありますか?
Artur79 2013

@ Artur79残念ながらありません。少なくとも、データテーブルのソースをハッキングすることなしには。
mekwall 2013

2
<333この構文で'<"search-box"r><"H"lf>t<"F"ip>'は、さらに悪いものが存在するかどうか不明
Cristian E.

@HoàngLongあなたが実際にこのようなオプションを使用して検索ボックスをカスタマイズすることができますlanguage: { search: "example", searchPlaceholder: "example" }
Flimm

8

これは、DataTablesバージョン1.10.4に役立ちました。

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

「var oTable = $( '#myTable')。DataTable();」の大文字の「D」に注意してください。(datatables.net/faqs/#api
ライオネル

6

最近のバージョンでは構文が異なります。

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

この例では、tableデータテーブルが最初に初期化されるときに割り当てられた変数を使用していることに注意してください。この変数を使用できない場合は、次のように使用します。

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

以降:DataTables 1.10

–ソース:https : //datatables.net/reference/api/search()


4

これはあなたのために働くはずです:(DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

または

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

4

私も同じ問題を抱えていました。

投稿されたすべての代替案を試してみましたが、うまくいきませんでした。正しくない方法を使用しましたが、完全に機能しました。

検索入力の例

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

jqueryコード

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

4

サーバー側の処理を使用する場合に備えて、@ netbrainの回答にもう1つ追加したいと思います(serverSideを参照オプションを)。

データテーブル(searchDelayオプションを参照)によってデフォルトで実行されるクエリ調整は、.search()API呼び出しには適用されません。次の方法で$ .fn.dataTable.util.throttle()を使用することにより、それを元に戻すことができます。

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

1

fnDrawCallback関数を使用してテーブルを描画するときにdivを移動できます。

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

あなたがデータテーブルの新しいバージョンを使用する場合またはあなたが持っているでしょう:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },
ダニエルDudas

1
$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

ではloadtransajax.php、あなたのGET値を受け取ることがあります。

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

0

JQuery dataTableを使用している場合は、追加するだけ"bFilter":trueです。これにより、テーブルの外側にデフォルトの検索ボックスが表示され、動的に機能します。

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    

問題は、動的に作成された位置を変更することでした。テーブルの外に置く
MC
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.