サイト内のすべてのページのヘッダー内のデータセットの検索ボックス

Question

データボックスを検索する検索ボックスを作成しようとしています。

検索ボックスは、サイトのすべてのページのヘッダーに表示されます。ユーザーが検索ボックスに入力して送信すると、データテーブルが照会されます。

私はこれを見つけた：

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

oTable = $('#myTable').dataTable(); 
$('#myInpuTextField').keypress(function(){ 
     oTable.fnFilter($(this).val()); 
}) 

しかし、私は検索ボックスがヘッダになりますようにこれを実装する方法が不明でした。

助力のアドバイスをいただければ幸いです。

Answer 1

そのコードは正しいです。しかし、すべてはあなたの設定に依存します。 fnFilterは、検索するテキストである必須パラメータを1つだけ取ります。 2番目のパラメータを指定すると、1つの列のみをフィルタリングします。それ以外の場合は、すべての表のテキストを検索します。もちろん、複数の表を一度にフィルタリングできます。

//initialize table 1 
var oTable = $('#myTable').dataTable(); 
//initialize table 2 
var oTable2 = $('#myTable2').dataTable(); 
$('#myInpuTextField').keypress(function(){ 
     //filter table one 
     oTable.fnFilter($(this).val()); 
     //filter table two 
     oTable2.fnFilter($(this).val()); 
}) 

EDIT - 最後のコメントはEDITです。これを行うには、フォームを使用して値をサーバーに送信する必要があります。 次に、入力フィールドに投稿された値を「プリロード」し、fnFilterを呼び出します。何かのような（PHPで）

<?php 
$postedSearch = $_POST['posted']; 
?> 
<script type="text/javascript"> 
$(function(){ 
    var oTable = $('#idOfTable').dataTable(); 
    if($('#myInputTextField').val() !== ''){ 
    oTable.fnFilter($('#myInputTextField').val()); 
    } 
}()) 
</script> 
<input type="text" id="myInputTextField" value="<?php echo $postedSearch ?>" />