数据表从解析的 json 更改文本颜色
Posted
技术标签:
【中文标题】数据表从解析的 json 更改文本颜色【英文标题】：Datatables change text color from parsed json 【发布时间】：2021-08-15 14:32:48 【问题描述】：我正在尝试使用某些已解析的 json 数据更改行的文本颜色。
如果status 是True，那么文本颜色应该是red。我尝试使用rowCallback，但它把所有行都变成红色
这是我尝试过的
$('#tbldata').dataTable(
"data": jQuery.parseJSON(data.d),
"columns": [
"data": "user",
"data": "userseries",
"data": "invoice"
],
"ordering": true,
"info": false,
"searching": false,
"bStateSave": true,
"sDom": 'Rfrtlip',
"rowCallback": function (row, data, index)
if (status= True)
$('td', row).css( color: "red" );
);
这是我的 json 对象：
"data": [
"user": All,
"userseries": "6395637",
"invoice": 200,
"status": True
,
"user": Bll,
"userseries": "9473650",
"invoice": 180,
"status": False
]
【问题讨论】：
maaaybeif(status== True)...?...
【参考方案1】：
几点说明：
-
您的 JSON 示例不是有效的 JSON。
我假设"user": Bll 之类的条目应该是"user": "Bll"，
"status": True 也无效。如果 JSON 中实际包含"status": "True"，则需要使用if (data.status === 'True') ...。
如果 JSON 实际包含 "status": true，请参见下面的示例。
如果您已经向 DataTable 提供（有效）JSON，那么您不需要重新解析它 - 所以您不需要 jQuery.parseJSON()。
您的行回调代码中缺少。
我建议您使用现代选项名称（例如 dom 而不是 sDom）。但是，旧名称仍然有效 - 所以这是可选的。
这是一个显示上述所有要点的示例。我在示例中提供了一些嵌入式测试数据 - 显然您必须将其改回以使用您的数据源。
点击下方蓝色的“运行”按钮查看结果：
var dataSet =
"data": [
"user": "All",
"userseries": "6395637",
"invoice": 200,
"status": true
,
"user": "Bll",
"userseries": "9473650",
"invoice": 180,
"status": false
]
;
$(document).ready(function()
$('#tbldata').dataTable(
"data": dataSet.data,
"columns": [
"data": "user", "title": "Data" ,
"data": "userseries", "title": "User Series" ,
"data": "invoice", "title": "Invoice"
],
ordering: true,
info: false,
searching: false,
stateSave: true,
dom: 'Rfrtlip',
rowCallback: function (row, data, index)
if (data.status)
$('td', row).css( color: "red" );
);
);<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="tbldata" class="display dataTable cell-border" style="width:100%">
</table>
</div>
</body>【讨论】：
感谢您的详细解释。你的 sn-p 工作以上是关于数据表从解析的 json 更改文本颜色的主要内容，如果未能解决你的问题，请参考以下文章
当数据表输入来自服务器的 JSON 数据时更改 Google 图表栏颜色
如何在数组上找到最小值、最大值以及如何使用角度更改最小绿色和最大红色的颜色文本