jQuery数据表过滤具有特定类的行 [英] jQuery datatables filter row with specific class

问题描述

我正在一个jQuery Datatable项目中，我需要根据特定的行类过滤数据.我要根据条件在创建行时将类添加到我的行中.我试图找出一种方式让用户单击按钮，该按钮将应用仅显示包含特定类的行的过滤器.

I am working on a jQuery Datatable project where I need to filter the data based on specific row classes. I'm adding classes to my rows upon row creation based on a condition. I'm trying to figure out a way for my user to click a button which would apply a filter that only displays rows that contain a specific class.

我尝试了几种不同的解决方案，但似乎无法使其工作.有人知道如何正确执行此操作吗?

I've tried a few different solutions but I can't seem to make it work. Does anyone know how to do this correctly?

这是 JSFiddle

$('#table').DataTable({
data: data,
columns: [
    { 
        "data": "item1",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format1'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    },
    { 
        "data": "item2",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format2'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    }   
],
createdRow: function ( row, data, index ) {
    if (data.item2 == 'this is item 2 - meets condition1') {
        $(row).addClass('condition1');
    }
    if (data.item2 == 'this is item 2 - meets condition2') {
        $(row).addClass('condition2');
    }
}
});

$('#btn-filter').on('click',function(){
    //// only show table data that contains the class condition1
});
$('#btn-undo').on('click',function(){
    //// remove the filter that was applied with btn-filter
});

推荐答案

工作中的小提琴 .

Working fiddle.

您可以使用:

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
       return $(table.row(dataIndex).node()).hasClass('condition1');
   }
);

要过滤表格，然后重置即可，只需使用:

To filter the table, then to reset it just use :

$.fn.dataTable.ext.search.pop();

请注意，您应该在两个actios之后重新绘制.

Note that you should refdraw after the both actios.

希望这会有所帮助.

let data = [{
  "item1": "this is item 1 - data set 1",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 2",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 3",
  "item2": "this is item 2 - meets condition2"
}, {
  "item1": "this is item 1 - data set 4",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 5",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 6",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 7",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 8",
  "item2": "this is item 2 - meets condition2"
}, {
  "item1": "this is item 1 - data set 9",
  "item2": "this is item 2"
}];

var table = $('#table').DataTable({
  data: data,
  columns: [
    { "data": "item1",					  
     "render": function ( data, type, row ) {
       if(type === 'display'){
         return "<span class='format1'>"+data+"</span>";
       }else if(type === 'sort'){
         return data;
       }else if(type === 'filter'){
         return data;
       }else{
         return data;
       }
     }
    },
    { "data": "item2",					  
     "render": function ( data, type, row ) {
       if(type === 'display'){
         return "<span class='format2'>"+data+"</span>";
       }else if(type === 'sort'){
         return data;
       }else if(type === 'filter'){
         return data;
       }else{
         return data;
       }
     }
    }],
  createdRow: function ( row, data, index ) {
    if (data.item2 == 'this is item 2 - meets condition1'){
      $(row).addClass('condition1');
    }
    if (data.item2 == 'this is item 2 - meets condition2'){
      $(row).addClass('condition2');
    }
  }
});

$('#btn-filter').on('click',function(){
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      return $(table.row(dataIndex).node()).hasClass('condition1');
    }
  );
  table.draw();
});
$('#btn-undo').on('click',function(){
  $.fn.dataTable.ext.search.pop();
  table.draw();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>

<input type="button" id="btn-filter" value="click to select only condition1"/>
<input type="button" id="btn-undo" value="click to undo what '#btn-filter' did"/>
<br/><br/>

<table id="table"></table>

这篇关于jQuery数据表过滤具有特定类的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！