[解決済み] データテーブル - データテーブルの外側にある検索ボックス

質問

データテーブル( datatables.net ) を使用していますが、検索ボックスをテーブルの外側 (例えばヘッダー div) に配置したいと思います。

これは可能ですか？

どのように解決するのですか？

DataTablesのapiを使用して、テーブルをフィルタリングすることができます。したがって、必要なのは DataTables へのフィルタ機能をトリガーする keyup イベントを持つ独自の入力フィールドだけです。cssやjqueryを使えば、既存の検索入力フィールドを隠したり消したりすることができます。あるいは、DataTables にそれを削除/含めない設定があるかもしれません。

これについては、Datables 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() ;
})