javascript - jQuery 数据表过滤具有特定类的行

Question

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

我尝试了几种不同的解决方案，但似乎无法使其发挥作用。有谁知道如何正确执行此操作？

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

Answer 1

<强> Working fiddle 。

你可以使用:

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

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

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

请注意，您应该在这两个操作之后重新绘制。

希望这有帮助。

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>