jQuery 数据表“或”搜索/过滤器

jQuery DataTables 'OR' Search/ Filter

提问by Sameer Joshi

I am using jQuery DataTables (http://www.datatables.net/) to display some tabular data. The search/ filter is a powerful feature. Although if multiple keywords are searched in the table the search filters only the already filtered data.

我正在使用 jQuery DataTables ( http://www.datatables.net/) 来显示一些表格数据。搜索/过滤器是一个强大的功能。虽然如果在表中搜索多个关键字，搜索只会过滤已经过滤的数据。

For instance in the example here - http://jsfiddle.net/illuminatus/2j0Lz5or/1/

例如在这里的例子 - http://jsfiddle.net/illuminatus/2j0Lz5or/1/

If the keywords are searched like 10 99it does not yield any result. I want the search to display all the results/ rows containing all the keyword which are searched or entered.

如果像10 99这样搜索关键字，则不会产生任何结果。我希望搜索显示包含搜索或输入的所有关键字的所有结果/行。

Searching 10 99would display rows 1, 5 and 6.

搜索10 99将显示第 1、5 和 6 行。

Technically, the search should be an 'OR' search.

从技术上讲，搜索应该是“或”搜索。

Would appreciate any help.

将不胜感激任何帮助。

EDIT: The search should be an 'OR' search.

编辑：搜索应该是“或”搜索。

回答by davidkonrad

AND-filter (include rows where all search words is present). This custom filteroverrides the builtin filtering process. Each column in each row is compared with each search word.

AND-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;
   }
);

forked fiddle -> http://jsfiddle.net/9d097s4a/

分叉小提琴 - > http://jsfiddle.net/9d097s4a/

---

---

OR-filter (include rows where at least one of the search words is present). This is another approach, mostly an attempt to streamline this answerabove. Instead of playing with oSearchand hardcoded search terms, the default filtering event is replaced with an event that tokenizes the search phrase and then performs an advanced fnFilter(). As optional experiment, the search is now only performed when the user hits enter- it feels somehow more natural.

OR-filter（包括至少存在一个搜索词的行）。这是另一种方法，主要是试图简化上面的这个答案。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
    }
});

see demo -> http://jsfiddle.net/2p8sa9ww/

看演示 -> http://jsfiddle.net/2p8sa9ww/

回答by Kevin

Updated for Datatables 1.10

更新数据表 1.10

//Search field in new location

//在新位置搜索字段

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();
    }
});

回答by Sameer Joshi

I got this working by using regEx search. I used the following regEx to search throughout the table for keywords 10 99

我通过使用 regEx 搜索来解决这个问题。我使用以下正则表达式在整个表格中搜索关键字10 99

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

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

Forked fiddle - http://jsfiddle.net/illuminatus/2j0Lz5or/6/

分叉小提琴 - http://jsfiddle.net/illuminatus/2j0Lz5or/6/

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

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

回答by boateng

The same but triggering search on "every" key press instead of pressing enter:

相同但在“每次”按键时触发搜索，而不是按 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);
    }
});