Phoenix - DataTableを使用したサイト全体の検索機能

Question

私はPhoenix Webアプリケーションで作業していますが、検索を指し示すナビゲーションバーにあるグローバル検索ボックスを実装する方法を見つけようとしていますDataTablesで構築された/usersにあるテーブル今のように、検索バーで検索を送信すると/usersにリダイレクトされますが、検索はテーブルに適用されません。

app.html.eex（レイアウト）：

<form id="custom-search-input" class="nav navbar-nav pull-right" action="/users"> 
    <div class="input-group"> 
    <input id="ee-search" type="text" name="search" class="form-control" placeholder="Employee Search" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-info"> 
     <i class="fa fa-search"></i> 
     </button> 
    </span> 
    </div> 
</form> 

app.js：

$(document).ready(function() { 
    $('#employeeTable').DataTable(); 
}); 

var table = $('#employeeTable').DataTable({ 
    "lengthMenu": [ [15, 50, 75, 150, -1], [15, 50, 75, 150, "All"] ] 
}); 

私はapp.jsに配置されたDataTableのAPIでこれを見つけた：

$('#ee-search').on('keyup', function() { 
    table.search(this.value).draw(); 
}); 

私は前もってお詫びします...私のjavascriptのスキルは事実上存在しません。検索入力をDataTableに適用するにはどうすればよいですか？私は、フォーム提出/ JavaScriptコード/ DataTableをリンクする方法があると仮定しますか？さらに詳しい情報やコードが必要な場合は、私にお知らせください。ありがとう！

Answer 1

サーバーへの往復をせずに、1つのページから別のページにデータを渡す3つの方法があります。ローカルストレージ内のデータ、Cookie、およびセッション変数を取得します。これらのうち、私はGETデータを使用することから始めます。

this question（これは多くの例の1つで、）は、GETメカニズムを使用してあるページから別のページにデータを渡す方法を説明しています。基本的には、フォームの属性にmethod="GET"を追加して、\usersページから結果のクエリ文字列を解析する必要があります。

はその後、検索を実行するために、ちょうどそう、引数としてあなた解析された文字列を渡し、search()メソッドを呼び出し、draw()メソッドを呼び出します。

myTable.search(myTextString).draw(); 

のDataTableには検索用語を適用すると、フィルタ結果を表示し、テーブルを再描画します。