2017-11-07 7 views
0

したがって、私はtfooterでselectボックスを使用するテーブルを持っています。実際には、テーブルを作成するためにdatatablesプラグインを使用します。私は選択ボックスJqueryのデータ型は、select/Filterの厳密な値でフィルタリングします

<tfoot> 
    <tr> 
    <th>name</th> 
    <th> 
     <select id='filterOnDiff'> 
      <option value="">All</option> 
      <option value="2">2</option> 
      <option value="5">5</option> 
      <option value="21">21</option> 
      <option value="22">22</option> 
      <option value="25">25</option> 
     </select> 
    </th> 
    ... 
    </tr> 
    </tfoot> 

を有するテーブルフッターに

$(document).ready(function() { 

    $('#simpleClassTable').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": "{% url 'simpleclasssummaryjson' %}", 
     "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], 
     "aoColumnDefs": [], 
     "aaSorting": [[4,'desc'], [3,'desc']], 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     }, 
    }) 
}); 

Iは、選択ボックスの値によってテーブルをフィルタリングされたjQueryの機能を定義しました。

$('#filterOnDiff').on('change', function() { 
    var table = $('#simpleClassTable').DataTable(); 
    table.column(1). 
     search($(this).val()). 
      draw(); 
}); 

すべて正常です。正確な値については(21,22などと言うことができます)しかし、値 "2"では機能しません。私は値2を選択していた場合、テーブルは「2」、「21」、「22」の値を返すされている

、...

だから私の質問は、にフィルタリングするjavascript関数を変更する方法です正確な値?

ここではここ21 enter image description here

で正しいフィルタリングあなたは^をリードして$末尾と提供と検索値をラップする、正規表現としてsearch APIを使用することができます。2. enter image description here

答えて

0

と間違ってフィルタリングされています第2引数はtrue、第3引数はfalseとなります。ここにはsimilar exampleがあります。

$('#filterOnDiff').on('change', function() { 
    var table = $('#simpleClassTable').DataTable(); 
    table.column(1). 
    search(this.value && `^${this.value}$`, true, false). 
     draw(); 
}); 

plunker:

だから、あなたにコードを書き換えるしようhttps://plnkr.co/edit/jCKGSY?p=preview、 'ID' 列

をフィルタリングしてみてください
関連する問題