入力変化のトリガーのDataTableをハイライト表示し、フィルターベース

Question

説明

私はテーブル

<table id="account-table" class="table display nowrap" cellspacing="0" width="100%"> 
    <thead> 
    <tr class="text-left"> 
     <th>ID</th> 
     <th>Type</th> 
     <th>Name</th> 
     <th>Email Address</th> 
     <th>Action</th> 
    </tr> 
    </thead> 
</table> 

を持ってここに私の検索入力ボックスには、私は

<input type="text" class="form-control mb20" id="search" placeholder="Search"> 

---

試み

ですこの設定を試しました

**include** 

<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script> 



**settings** 

$('#account-table').DataTable({ 
    data: data, 
    deferRender: true, 
    paging: true, 
    searching: true, 
    bLengthChange : false, 
    Filter: false, 
    Info:false, 
    searchHighlight:true, 
    iDisplayLength: 10, 
}); 


**trigger the draw while typing** 

$('#search').keyup(function(){ 
    $('#account-table').search($(this).val()).draw(); 
}); 

検索入力ボックスの入力を開始すると、検索機能が動作しない理由がわかりません。

コンソールにエラーがあります。

---

質問

どのように1本、さらに行くとデバッグのでしょうか？

---

私はこの時点でどのような提案もありません。

これについてのヒント/提案/ヘルプは非常に高く評価されます！

Answer 1

独自の検索ボックスを作成する必要はありません。データテーブルはテーブルの上に作成します。

<input type="search" class="" placeholder="" aria-controls="account-table">という名前で生成されたものが表示されていますか？独自の検索ボックスを使用する必要がある場合

$('#search').keyup(function(){ 
    $('#account-table').DataTable().search($(this).val()).draw(); 
}); 

にそれができなかった理由を使用し、その後、JSFiddle

：

は、ここですべてのコードとし、作業のフィルタとハイライトでJSFiddleです$('#account-table')はそのセレクタに一致する要素の検索からjQueryの結果を返し、DOM要素にはsearchという関数がないために働いていました。 .DataTable()を呼び出すと、DataTableはそのDOMテーブルを生成したテーブルオブジェクトを返します。