Question

所以我试图动态更改我的datatables元素的td类。从我的研究中我发现fnRowCallback，它似乎是解决方案，但我无法让它工作。从Stack的一个问题我发现：

 "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：意外的令牌，我的元素保持“[class name] content”格式。这是我的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”。关于如何让它发挥作用的任何想法？

谢谢

Answer 1

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

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

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

因此，您无法使用i访问指定行中的单元格。

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

使用Datatables动态更改td类

1 个答案: