jQuery数据表格筛选器行与特定类

Question

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

我试过几种不同的解决方案，但我似乎无法使它工作。有谁知道如何正确地做到这一点？

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

请注意，您应该两者actios后refdraw。

希望这会有所帮助。

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", \t \t \t \t \t 
 
    "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", \t \t \t \t \t 
 
    "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>