jQuery 数据表“或"搜索/过滤器 [英] jQuery DataTables 'OR' Search/ Filter

问题描述

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

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.

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

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

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

If the keywords are searched like 10 99 it 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 将显示第 1、5 和 6 行.

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

从技术上讲，搜索应该是OR"搜索.

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

非常感谢您的帮助.

搜索应该是或"搜索.

推荐答案

AND-filter(包括存在所有搜索词的行).此自定义过滤器 会覆盖内置过滤过程.每行中的每一列都与每个搜索词进行比较.

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

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

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

OR-过滤器(包括至少存在一个搜索词的行).这是另一种方法，主要是为了简化上面的这个答案.与使用 oSearch 和硬编码搜索词不同，默认过滤事件被替换为标记搜索短语然后执行高级 fnFilter() 的事件.作为可选实验，搜索现在仅在用户点击 enter 时执行 - 感觉更自然.

OR-filter (include rows where at least one of the search words is present). This is another approach, mostly an attempt to streamline this answer above. Instead of playing with oSearch and 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.

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/

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

这篇关于jQuery 数据表“或"搜索/过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！