jquery - Jquery Datatable検索ボックスの再配置

Question

jqueryデータテーブルの外にフィルターボックスを再配置したい。私はこれを正確に好きにしたい：

どうすればいいですか？

Answer 1

#<table_id>_filter次のようにして、 divを目的の位置に再配置するだけdetach().appendTo()です:

$("#example").DataTable({
    initComplete : function() {
        $("#example_filter").detach().appendTo('#new-search-area');
    }
});

検索フィルター ボックスが再配置された位置にどのように表示されるかをスタイルすることもできます。

#new-search-area {
    width: 100%;
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
}
#new-search-area input {
    width: 600px;
    font-size: 20px;
    padding: 5px;
}

デモ -> http://jsfiddle.net/dq2bmgd9/

Answer 2

DataTables API を使用して、テーブルをフィルター処理できます。したがって、必要なのは、フィルター関数を DataTables にトリガーする keyup イベントを含む独自の入力フィールドだけです。css または jquery を使用すると、既存の検索入力フィールドを非表示/削除できます。または、DataTables に、それを削除する/含めない設定がある可能性があります。

これについては、Datatables API ドキュメントを参照してください。

例：

HTML

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

JS

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

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