数据表从解析的 json 更改文本颜色答案

【问题标题】：Datatables change text color from parsed json数据表从解析的 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
    }
  ]
}

【问题讨论】：

maaaybe if(status== True){...?...

标签： jquery json datatables

【解决方案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 工作