web-dev-qa-db-ja.com

jQuery DataTables 'OR'検索/フィルター

JQuery DataTables（ http://www.datatables.net/ ）を使用して、表形式のデータを表示しています。検索/フィルターは強力な機能です。ただし、テーブルで複数のキーワードが検索された場合、検索は既にフィルタリングされたデータのみをフィルタリングします。

たとえば、ここの例- http://jsfiddle.net/illuminatus/2j0Lz5or/1/

キーワードが10 99のように検索された場合、結果は得られません。検索で、検索または入力されたすべてのキーワードを含むすべての結果/行を表示したい。

10 99を検索すると、行1、5、6が表示されます。

技術的には、検索は「OR」検索である必要があります。

どんな助けにも感謝します。

編集：検索は「OR」検索である必要があります。

jquerysearchdatatablesjquery-datatables
12
Sameer Joshi

[〜＃〜]および[〜＃〜]-filter（すべての検索ワードが存在する行を含めます）。この カスタムフィルター は、組み込みのフィルター処理をオーバーライドします。各行の各列は、各検索ワードと比較されます。

_$.fn.dataTableExt.afnFiltering.Push(
  function(oSettings, aData, iDataIndex) {
      var keywords = $(".dataTables_filter input").val().split(' ');  
      var matches = 0;
      for (var k=0; k<keywords.length; k++) {
          var keyword = keywords[k];
          for (var col=0; col<aData.length; col++) {
              if (aData[col].indexOf(keyword)>-1) {
                  matches++;
                  break;
              }
          }
      }
      return matches == keywords.length;
   }
);
_

分岐したフィドル->http://jsfiddle.net/9d097s4a/

[〜＃〜]または[〜＃〜]-filter（少なくとも1つの検索語が存在する行を含めます）。これは別のアプローチであり、主に上記の この答え を合理化する試みです。 oSearchとハードコーディングされた検索語を操作する代わりに、デフォルトのフィルタリングイベントは、検索フレーズをトークン化して高度なfnFilter()を実行するイベントに置き換えられます。オプションの実験として、ユーザーがヒットしたときにのみ検索が実行されるようになりました enter -なんとなく自然に感じます。

_var input = $(".dataTables_filter input");
input.unbind('keyup search input').bind('keypress', function (e) {
    if (e.which == 13) {
       var keywords = input.val().split(' '), filter ='';
       for (var i=0; i<keywords.length; i++) {
           filter = (filter!=='') ? filter+'|'+keywords[i] : keywords[i];
       }            
       dataTable.fnFilter(filter, null, true, false, true, true);
       //                                ^ Treat as regular expression or not
    }
});
_

デモを見る->http://jsfiddle.net/2p8sa9ww/

18
davidkonrad

RegEx検索を使用してこれを機能させました。次のregExを使用して、テーブル全体でキーワード_10 99_を検索しました

^(?=.*?(10|99)).*?

フォークされたフィドル- http://jsfiddle.net/illuminatus/2j0Lz5or/6/

参照： http://datatables.net/forums/discussion/12062/filtering-jquery-datatable-using-regular-expression

3
Sameer Joshi

データテーブル1.10用に更新

//新しい場所でフィールドを検索

Table = $('#your_datatable').DataTable();
$('#your_input_text_field').keyup(function () {
    Table.search($(this).val()).draw();
})

////OR search (enabling regular expression search)
var input = $('#your_input_text_field');
input.unbind('keyup search input').bind('keypress', function (e) {
    if (e.which == 13) {
        var keywords = input.val().split(' '),
            filter = '';
        for (var i = 0; i < keywords.length; i++) {
            filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i];
        }
        //true (param 2) turns regex on, false (param 3) turns smart search off
        Table.search(filter, true, false).draw();
    }
});
2
Kevin

同じですが、Enterキーを押す代わりに「すべての」キーを押すと検索がトリガーされます。

var dataTable = $('table').dataTable();
var input = $(".dataTables_filter input");
input.unbind('keyup search input').bind('keyup',
function(e) {
    if (input.val().length > 0) {
        var keywords = input.val().trim().split(' '), filter = '';
        for (var i = 0; i < keywords.length; i++) {
            filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i];
        }
        dataTable.fnFilter(filter, null, true, false, true, true);
        //                                ^ Treat as regular expression or not                        
    } else if (input.val().length == 0) {
        dataTable.fnFilter(" ", null, true, false, true, true);
    }
});
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>

<h5>OR SEARCH</h5>
<table>
  <thead>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
  </thead>
  <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>10</td></tr>
      <tr><td>0</td><td>5</td><td>0</td><td>0</td></tr>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
      <tr><td>2</td><td>0</td><td>0</td><td>10</td></tr>
      <tr><td>0</td><td>0</td><td>9</td><td>10</td></tr>
      <tr><td>0</td><td>0</td><td>99</td><td>0</td></tr>
  </tbody>
</table>
var dataTable = $('#your_datatable').dataTable();
var input = $(".dataTables_filter input");
input.unbind('keyup search input').bind('keyup',
function(e) {
    if (input.val().length > 0) {
        var keywords = input.val().trim().split(' '), filter = '';
        for (var i = 0; i < keywords.length; i++) {
            filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i];
        }
        dataTable.fnFilter(filter, null, true, false, true, true);
        //                                ^ Treat as regular expression or not                        
    } else if (input.val().length == 0) {
        dataTable.fnFilter(" ", null, true, false, true, true);
    }
});
2
boateng