数据表过滤背景颜色的列

Question

我在 jQuery datatables 中有一个表格，非常标准，但我使用 rowcallback 根据标准更改某些单元格的背景颜色。这发生在 3 列 6,7 和 8。rowcallback 可以根据我的需要完善和着色单元格。

但是，有时我的表中可能有很多数据，所以我想通过一个按钮过滤/搜索以仅显示第 6,7 和 8 列具有石灰背景色的行。

我尝试使用标准搜索并包含术语“lime”或 css

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

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');
    }
}

我想要的是一个我可以点击的按钮，它只会显示第 7,8 和 9 列中的任何一个具有石灰背景颜色的单元格

Answer 1

自定义搜索plug-in 可能会解决您的问题。这样，您可以根据行是否包含具有必要类的单元格（例如“石灰”）来过滤行：

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

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

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

//src data
const srcData = [
  {item: 'apple', qty: 15},
  {item: 'banana', qty: 8},
  {item: 'mango', qty: 4},
  {item: 'kiwi', qty: 11},
  {item: 'pear', qty: 12}
];

//datatables initialization
const dataTable = $('table').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'item', data: 'item'},
    {
      title: 'qty', 
      data: 'qty',
      createdCell: (td,_,rowData) => rowData.qty < 10 ? $(td).addClass('lime') : true
    }
  ]
});

//custom filtering based on matching class 'lime'
//and 'show/hide' button state (class 'limeOnly')
$.fn.DataTable.ext.search.push((_,__,rowIdx) => $(dataTable.row(rowIdx).node()).has('td.lime').length || !$('#showLime').hasClass('limeOnly'));

//toggle class 'limeOnly' on the button and re-draw table
$('#showLime').on('click', function(){
  $(this).toggleClass('limeOnly');
  dataTable.draw();
});

.lime {background-color: lime}

<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table></table><button id="showLime">Show/Hide lime</button></body></html>