Datatables根据背景颜色过滤列

我在jQuery中有一个表，非常标准，但我使用

rowcallback

根据条件更改某些单元格的背景色。这发生在3列6、7和8上。

rowcallback

可以根据我的需要完善和着色单元格

但是，有时我的表中会有很多数据，因此我希望通过按钮进行过滤/搜索，以仅显示列6、7和8背景颜色为石灰的行

我试着使用标准搜索，包括术语“石灰”或css

table.columns(8).search("style=background-color: lime").draw();

我想要的是一个我可以点击的按钮，它将只显示cols 7、8和9中任何一个具有石灰背景色的单元格。自定义搜索可能会解决您的问题。这样，您可以根据行中是否有具有必要类的单元格（例如“lime”）来筛选行：

因此，您提到的按钮只需重新绘制表格即可

完成演示您可以在下面找到：

//src数据
常数srcData=[
{商品：'苹果'，数量：15}，
{项目：'香蕉'，数量：8}，
{项目：'芒果'，数量：4}，
{项目：'猕猴桃'，数量：11}，
{项目：'pear'，数量：12}
];
//数据表初始化
常量dataTable=$（'table'）。dataTable({
dom：‘t’，
数据：srcData，
栏目：[
{标题：'item'，数据：'item'}，
{
标题：“数量”，
数据：“数量”，
createdCell：（td，_，rowData）=>rowData.qty<10？$（td）.addClass（'lime'）：true
}
]
});
//基于匹配类“lime”的自定义筛选
//和“显示/隐藏”按钮状态（类“limeOnly”）
$.fn.DataTable.ext.search.push（（u，u，rowIdx）=>$（DataTable.row（rowIdx.node（））.has（'td.lime'）。length | |！$（'showlalim'）。hasClass（'limeOnly'）；
//在按钮上切换“limeOnly”类并重新绘制表格
$（'#showLime'）。在（'click'，function（）上{
$（this.toggleClass（'limeOnly'）；
dataTable.draw（）；
});
.lime{背景色：lime}
Show/Hide lime
谢谢，我得到了事件的传播，虽然它的复杂性是有意义的，但我按照您的建议更改了我的事件处理程序，但我仍然只看到第一页
code
$（'body'）上的结果;      }); <代码>代码

现在应该可以工作了，因为我正在将它应用到文档正文中，文档正文应该覆盖所有页面，但是它仍然只返回第一页的结果Hi Yevgen，no仍然不工作，这里的codepen@MikeHobson：我不明白这个问题-你的“开/关”开关完美地来回过滤突出显示的条目，而不管当前的表格页面如何。你能更详细地解释一下什么工作不符合预期吗？嗨，Yevgen，当我运行代码笔时，除了单击开/关开关什么都不做，我只看到1个结果，这是前10个结果。如果我将页面大小更改为100并单击开关，我会看到4，如果我从第1页移动到第2页并单击开关，我会看到2。在我看来，直到数据显示后才加载，一旦加载，开关就会按预期工作。我当前将类似这样的字符串传递到变量pi2：“20:30”，我将其拆分，如果超过15，我将突出显示

var chars=data[“pi2”]。拆分（“：”）；如果（Number（chars[0]）+Number（chars[1]）>15{$（row）.find（'td:eq（8））.addClass（'lime'）；}

查看您的示例，我不确定这将如何工作，它似乎建议我需要在colulms部分添加

{data:'pi2'，createdCell:'td，{，rowData=>rowData.pi2>15？$（td.addClass（'lime'）：true}

添加此数据表时失败

rowCallback: function (row, data, index) {
    if ((data["nextover"] > 85 && data["sno"] > 14) || (data["nextover"] > 70 && data["sno"] > 10 && data["time"] >= 70) || (data["nextover"] > 55 && data["sno"] > 5 && data["time"] >= 81)) {
        $(row)
        .find('td:eq(6)')
        .css('background-color', 'lime');
    } else {
        $(row)
        .find('td:eq(6)')
        .css('background-color', 'mistyrose');
    }
    var chars = data["pi2"].split(':');
    if (Number(chars[0]) + Number(chars[1]) > 15) {
        $(row)
        .find('td:eq(8)')
        .css('background-color', 'lime');
    } else {
        $(row)
        .find('td:eq(8)')
        .css('background-color', 'mistyrose');
    }
    var chars2 = data["pi1"].split(':');
    if (Number(chars2[0]) + Number(chars2[1]) > 70) {
        $(row)
        .find('td:eq(7)')
        .css('background-color', 'lime');
    } else {
        $(row)
        .find('td:eq(7)')
        .css('background-color', 'mistyrose');
    }
}

$.fn.DataTable.ext.search.push((_,__,rowIdx) => $(dataTable.row(rowIdx).node()).has('td.lime').length || !$('#showLime').hasClass('limeOnly'));