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>