web-dev-qa-db-ja.com

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

DataTables（ datatables.net ）を使用しており、検索ボックスをテーブルの外に配置したい（たとえば、ヘッダーdivに）。

これは可能ですか？

jquerysearchdatatablesfiltering
108
Athanasios Emmanouilidis

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() ;
})
212
netbrain

@lvkzコメントによると：

大文字のd .DataTable()（これはDatatable APIオブジェクトを返します）でdatatableを使用している場合、これを使用します。

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

@netbrainの答えです。

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

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

これには sDom オプションを使用できます。

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

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

jQuery UIを使用する場合（bjQueryUIをtrueに設定）：

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

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

特別な略記構文を使用している場合でも、実際に投げたHTMLを使用できます。

14
mekwall

これはDataTablesバージョン1.10.4の新しいAPIでした。

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

より新しいバージョンの構文は異なります。

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（）

6
Jonny

これはあなたのために働くはずです：（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
Sky Yip

サーバー側の処理を使用する場合に関連する @ netbrain's answer にもう1つ追加します（ serverSide オプションを参照）。

データテーブルによってデフォルトで実行されるクエリ調整（ searchDelay オプションを参照）は、.search() AP​​I呼び出しには適用されません。次の方法で $。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);
});
3
citxx

同じ問題がありました。

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

検索入力の例

<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();
});
3
Bruno Ribeiro
$('#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 .= ')';
}
1
Senanayaka

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

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

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
        });
0
Nikhil Thombare