jQuery DataTables的“或”搜索/过滤

Question

jQuery DataTables的“或”搜索/过滤

jquerysearchdatatables

15

我正在使用 jQuery数据表格（http://www.datatables.net/）用于展示一些表格数据。搜索/筛选是一个强大的功能。当在表格中搜索多个关键字时，搜索仅过滤已经过滤过的数据。

例如，在此处的示例-http://jsfiddle.net/illuminatus/2j0Lz5or/1/ 如果像 10 99 这样搜索关键词，则不会产生任何结果。我希望搜索显示所有包含搜索或输入的所有关键字的结果/行。

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

从技术上讲，搜索应为“OR”搜索。

需要注意的是，搜索应该是“OR”搜索。

- Sameer Joshi

1

你也可以使用我的yadcf插件（多重过滤器）http://yadcf-showcase.appspot.com/DOM_source_chosen.html（查看第一列）。 - Daniel

4个回答

7

已更新至Datatables 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();
    }
});

- Kevin

4

我通过使用正则表达式搜索使其工作。我使用以下正则表达式在整个表格中搜索关键字10 99 ^(?=.*?(10|99)).*? 分叉的fiddle - http://jsfiddle.net/illuminatus/2j0Lz5or/6/ 参考：http://datatables.net/forums/discussion/12062/filtering-jquery-datatable-using-regular-expression

- Sameer Joshi

当您拥有自定义搜索输入字段（例如非内置输入）和自定义事件进行预处理以手动执行搜索时，此方法通常最适用。OR过滤可以通过多种方式实现，在下面的答案中添加了更“简化”的版本。 - davidkonrad

3

触发搜索的方式不同，变为在每次按键时自动搜索，而不是需要按下回车键：

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

- boateng

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

AND-筛选器（包括存在所有搜索词的行）。这个自定义筛选器覆盖了内置的筛选过程。每一行中的每一列都与每个搜索词进行比较。

$.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/

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

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