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

Posted 2023-05-07

【中文标题】jQuery数据表过滤具有特定类的行

【英文标题】：jQuery datatables filter row with specific class

【发布时间】：2017-11-22 02:11:38

【问题描述】：

我正在开发一个 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
);

【参考方案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>

【讨论】：

真棒......这就是我一直在寻找的。 pop() 是如何工作的？它只是删除最后一组搜索还是所有搜索。

很高兴我能帮上忙。 pop() 函数清除到目前为止应用的过滤器...

我必须在自定义搜索过滤器中重新声明我的数据表，以防止无法读取属性行未定义错误，如下所示：dt = $("#table").DataTable() ;