使用 Datatables 动态更改 td 类答案

【问题标题】：Change td class dynamically with Datatables使用 Datatables 动态更改 td 类
【发布时间】：2017-11-08 10:32:30
【问题描述】：

所以我正在尝试动态更改我的数据表元素的 td 类。根据我的研究，我发现了 fnRowCallback，这似乎是解决方案，但我无法让它发挥作用。从 Stack 的 1 个问题中我发现：

 "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    for (var i in aData)  {

      // Check if a cell contains data in the following format:
      // '[state] content'
      if (aData[i].substring(0,1)=='[') {

        // remove the state part from the content and use the given state as CSS class
        var stateName= aData[i].substring(1,aData[i].indexOf(']'));
        var content= aData[i].substring(aData[i].indexOf(']')+1);
        $('td:eq('+i+')', nRow).html(content).addClass(stateName);
      }
    }
  }

但这对我不起作用，我收到错误：Uncaught SyntaxError: Unexpected token，并且我的元素保持“[类名]内容”格式。这是我的javascript函数：

$('#tableId').DataTable({
     "ajax" :  "function.php",

     "columns" : [ 
     {
      "data" : "id"
 }, {
      "data" : "firstElement"
 }, {
      "data" : "secondElement"
 }, {
      "data" : "thirdElement" 
 }],

 "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    for (var i in aData)  {

      // Check if a cell contains data in the following format:
      // '[state] content'
      if (aData[i].substring(0,1)=='[') {

        // remove the state part from the content and use the given state as CSS class
        var stateName= aData[i].substring(1,aData[i].indexOf(']'));
        var content= aData[i].substring(aData[i].indexOf(']')+1);
        $('td:eq('+i+')', nRow).html(content).addClass(stateName);
      }
    }
  },

 "iDisplayLength": 5,

 "scrollX": true,

 "orderFixed": [[ 0, "asc"]]

});

function.php 给了我一个包含所有字段的 JSON，在我想要更改类的那些字段中，我使用“[class name] content”。关于如何让它工作的任何想法？

谢谢

【问题讨论】：

通过“Unexpected token”，我猜有一些错字。如果您可以在此处设置 JsFiddle 或可运行代码，将有助于我们快速解决。
此错误仅在我尝试在控制台中运行该功能时出现。但是在它工作的代码中，我用console.log 进行了测试。行不通的是 $('td:eq('+i+')', nRow).html(content).addClass(stateName);
可能是代码中的不可打印字符导致问题。去掉前后的空行试试看。

标签： javascript jquery html ajax datatables

【解决方案1】：

您的代码的问题是aData 将是一个关联数组，例如：

{ "id": 1, "firstElement": "[class] content" }

当您使用for...in 构造枚举属性时，i 将包含属性名称（id、firstElement）而不是数字索引。

因此您不能使用i 访问给定行内的单元格。

您的代码的另一个问题是它会在创建 HTML 内容后对其进行设置。 jQuery DataTables 将不知道您已更新单元格内容。

【讨论】：