jQuery DataTables 基于多个值过滤行 [英] jQuery DataTables filter rows based on multiple values

问题描述

我正在尝试使用多个过滤器，根据选择的过滤器隐藏/显示我的数据表中的行.我的计划是将过滤器值放在一个数组中，并将它们与第一列中的 data-search 属性进行比较，但我目前所拥有的不起作用.

这是我在下面加上代码的 JSfiddlehttps://jsfiddle.net/dmcgrew/06j4pxjk/3/

带有过滤器和表格数据复选框的 HTML..

<input type="checkbox" name="cat" value="cat" class="filter">猫<标签><input type="checkbox" name="dog" value="dog" class="filter">小狗<table class="select_items"><头><tr><th>项目</th><第>描述<th>Crest Allowed</th><th>&nbsp;</th></tr></thead><tr><td data-search="cat">1</td><td>测试碗</td><td>NO</td><td><button class="button">选择</button></td></tr><tr><td data-search="dog">32</td><td>杯测</td><td>NO</td><td><button class="button">选择</button></td></tr><tr><td data-search="dog">3335</td><td>碗测试</td><td>NO</td><td><button class="button">选择</button></td></tr></tbody>

JS..

var select_items = $('.select_items').DataTable();无功过滤器 = [];$('input.filter').on('change', function(){无功过滤器 = [];$("input.filter:checked").each(function(){var checkBox = $(this).val();if (filters.indexOf(checkedBox) === -1){过滤器.推(checkedBox)；}});控制台日志(过滤器)；如果(this.checked){$.fn.dataTable.ext.search.push(功能(设置，数据，数据索引){返回 (data[0].indexOf(filters) > -1) ?真假;});}select_items.draw();如果(this.checked){$.fn.dataTable.ext.search.pop();}});

解决方案

我使用 fnFilter API 对您的代码进行了一些更改:

<块引用>

文档:https://datatables.net/docs/DataTables/1.9.0/DataTable.html#fnFilter

$(function() {otable = $('.select_items').dataTable();})功能过滤器(){//使用 or(|) 条件构建正则表达式过滤器字符串var types = $('input:checkbox[name="filter"]:checked').map(function() {return '^' + this.value + '$';}).get().join('|');//过滤第0列，使用正则表达式，无智能过滤，无输入框，不区分大小写otable.fnFilter(types, 0, true, false, false, false);}

您可以在这里看到它的运行情况:JSFiddle 演示

I am trying to have multiple filters that will hide/show rows on my datatable based on which filters are selected. My plan is to place the filter values in an array and compare those to the data-search attribute in the first column, but what I currently have does not work.

Here's a JSfiddle that I have plus code below https://jsfiddle.net/dmcgrew/06j4pxjk/3/

HTML with checkboxes for filters and the table data..

<label>
    <input type="checkbox" name="cat" value="cat" class="filter"> Cats
</label>

<label>
    <input type="checkbox" name="dog" value="dog" class="filter"> Dogs
</label>

<table class="select_items">
    <thead>
        <tr>
            <th>Item</th>
            <th>Description</th>
            <th>Crest Allowed</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-search="cat">1</td>
            <td>Testing Bowl</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>
        <tr>
            <td data-search="dog">32</td>
            <td>Cup Test</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>
        <tr>
            <td data-search="dog">3335</td>
            <td>Bowl Test</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>

    </tbody>
</table>

The JS..

var select_items = $('.select_items').DataTable();

var filters = [];

$('input.filter').on('change', function(){
   var filters = [];
   $("input.filter:checked").each(function(){

    var checkedBox = $(this).val();
    if (filters.indexOf(checkedBox) === -1){
        filters.push(checkedBox);
    }
   });

   console.log(filters);

   if(this.checked){
      $.fn.dataTable.ext.search.push(
         function (settings, data, dataIndex){
            return (data[0].indexOf(filters) > -1) ? true : false;
         }
      );
   } 

   select_items.draw();

   if(this.checked){
      $.fn.dataTable.ext.search.pop();    
   }
});

解决方案

I made a few changes in your code, using the fnFilter API:

Documentation: https://datatables.net/docs/DataTables/1.9.0/DataTable.html#fnFilter

$(function() {
  otable = $('.select_items').dataTable();
})

function filterme() {
  //build a regex filter string with an or(|) condition
  var types = $('input:checkbox[name="filter"]:checked').map(function() {
    return '^' + this.value + '$';
  }).get().join('|');
  //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
  otable.fnFilter(types, 0, true, false, false, false);  
}

You can see it working here: JSFiddle demo

这篇关于jQuery DataTables 基于多个值过滤行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！