个人中心
gpt4 book ai didi

javascript - 数据表过滤背景颜色的列

转载 作者：行者123 更新时间：2023-11-30 19:20:19 24 4
gpt4 key购买 nike

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

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

最佳答案

自定义搜索 plug-in可能会解决你的问题。有了它，您可以根据行是否包含具有必要类(例如“lime”)的单元格来过滤行:

$.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>

关于javascript - 数据表过滤背景颜色的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57543821/

24 4 0
文章推荐： javascript - getIdToken() 不是函数，即使它在 firebase 文档中像函数一样使用
文章推荐： c - KnapSack Branch and Bound 奇怪的编译错误
文章推荐： c# - 当前上下文用户控件中不存在名称 'xxx'
文章推荐： c - 一遍又一遍地在String中使用struct(C语言)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com