个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在 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
我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。 这是我的外部数据表 html； 这是我生成数据表的方
我有一个字母数字列，其中包含诸如“1、2、2”之类的字符串。 当我在搜索中输入“1, 2, 2”时，它似乎返回带有“1,”和“2,”的所有单元格。 我该怎么做才能使搜索仅返回“1、2、2”？ 使用数据
我有一个获取其数据服务器端的表，使用自定义服务器端初始化参数，这些参数因生成的报告而异。表格生成后，用户可以打开一个弹出窗口，他们可以在其中添加多个附加过滤器以进行搜索。我需要能够使用与原始表相同的初
在 datatables我希望能够隐藏所有列，但似乎无法正确使用语法。 这来自下面的代码和上面的链接，创建了一个显示所有列的按钮。有没有办法写这个以便我可以隐藏所有列？ {
我正在使用 DataTable 创建一个交互式表。我有 9 列，其中 5 列是值。我想根据它们的具体情况更改每个单元格的背景颜色。 我已经开始尝试首先更改整行颜色，因为这似乎是一项更容易的任务。但是我
我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表内时，水平滚动时列标题不会移动。当它不在 html 表中时它工作正常。我的示例实际上取自他们的水平滚动示例，
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
这是添加按钮以将数据导出到 csv、pdf、excel 的数据表示例...... fiddle here https://datatables.net/extensions/buttons/examp
是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、excel)。 vm.dtOptions = DTOptionsBuilder.newOptions
我试图弄清楚如何加入 2 个数据表并更新第一个但应用了过滤器。 DT DT2 b c 1: 1 10 2: 2 10 3: 3 10 4: 4 10 5: 5 10 6: 6 10 7: 7 10
我有一个数据表，其中包含许多包含值的列。我还有另一列，它定义了我需要选择哪些列的值。我很难找到一种方法来做到这一点。 这是一个简单的例子。 > d d value.1 value.2 name
我正在使用 data.table 包。我有一个数据表，表示用户在网站上的操作。假设每个用户都可以访问一个网站，并对其执行多项操作。我的原始数据表是 Action (每一行都是一个 Action )，我
我想知道每个变量在每个组中变化了多少次，然后将结果添加到所有组中。 我是这样找到的: mi[,lapply(.SD, function(x) sum(x != shift(x), na.rm=T)
有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatab
我希望按 id 和按顺序(时间)计算不同的东西。 例如，与: dt = data.table( id=c(1,1,1,2,2,2,3,3,3), hour=c(1,5,5,6,7,8,23,23,23
我正在尝试在 JIRA 小工具中使用数据表，但在我的表准备就绪后，没有可用的分页按钮。我有一个表，我正在以最简单的方式使用数据表:$("#mytableid").dataTable(); 浏览页面元素
我有 responsive 表单中的数据表。 数据表生成 child rows在小型设备上。在这一行中，我有一些输入控件。这会导致两个问题。 第一个问题:**隐藏子行中的值不会进入表单数据。** 第二
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
是否有任何方法可以以编程方式更改显示的行数，而无需从下拉列表中手动选择？ 我已经知道如何更改默认行数。当表首次加载时，我希望它加载所有行，然后“刷新”表以可能仅显示前 10 行。但我想以编程方式刷新表
我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第三页。当我更改它时，数据表会自行刷新到第一页。我想做的是保留选定的页码并在刷新后回调它。这可能吗？ 顺便说一句，我正在使用
我是一名优秀的程序员,十分优秀！