数据表更改已解析的文本颜色 json

Question

我正在尝试更改具有某些已解析 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
    }
  ]
}

Answer 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>

数据表更改已解析的文本颜色 json

Datatables change text color from parsed json

jquery

json

datatables