DataTables 按名称访问列或从服务器返回额外数据答案

【问题标题】：DataTables access column by name or return extra data from serverDataTables 按名称访问列或从服务器返回额外数据
【发布时间】：2018-05-20 11:39:05
【问题描述】：

我正在尝试使我的 DataTables 函数具有通用性，以便它适用于我网站上的任何表。

我想根据将出现在我所有表格中的“状态”列为行的背景着色。目前我可以为行着色的唯一方法是按索引访问数据数组。我需要一种按名称而不是数组索引来访问列的方法。

下面的代码可以工作，根据aData[6] 中的值添加“绿色”或“红色”类，但有什么方法可以代替aData['status'] 中的值吗？

'https://www.example.com/table-data' 处的 php 返回一个数组：

return array('data' => array(...., ..., ....));

jQuery 初始化 DataTables：

$('.ajax-data-table').each(function(index) {
    var table = this.id;
    // Create ajax table with datatables
    $(this).dataTable({
        processing: true,
        ajax: {
            url: 'https://www.example.com/table-data',
            data: function (d) {
                d.table = table;
            }
        },
        deferRender: true,
        responsive: true,
        columnDefs: [
            {targets: ['no-sort'], bSortable: false},
            {targets: ['no-visible'], className: 'never'}
        ],
        fnRowCallback: function(nRow, aData, iDisplayIndex) {
            if (aData[6] == "W") $(nRow).addClass('working');
            else if (aData[6] == "C") $(nRow).addClass('closed');
            return nRow;
        }
    });
});

另一种可能是从服务器传回一些额外的数据，这样我就可以告诉 fnRowCallback 函数在哪一列中查找状态。

如果我从服务器传回一个数组，例如 return array('data' => array(...., ..., ....), 'extra' => 6);，我将如何访问 fnRowCallback 中的“额外”数据？

更新

我已经设法确认我可以从上面的服务器传回额外的数据，我可以看到使用 fnInitComplete：

fnInitComplete: function(oSettings, json) {
      console.log(json.extra);
}

是否可以访问fnRowCallback 中的json.extra 数据？如果有办法，我可以使用aData[json.extra]？

【问题讨论】：

标签： jquery datatables

【解决方案1】：

我最终找到了一些 hacky 解决方法来实现这一点。

所以，对于正在寻找类似解决方案的任何人.....

在您的表格中创建了一个隐藏列
为隐藏列传回一个键为“class”的关联数组：例如。 array('class' => 'myClass');
将以下内容添加到您的数据表 javascript 以查找具有关联数组且键名为“类”的任何列，并将值添加到表行类中：

fnRowCallback: function(nRow, aData, iDisplayIndex) {
      var className = $.map(aData, function(elem, index) {
          if (elem && elem.class) return elem.class;
      });
      // Add class to row
      if(className.length > 0) $(nRow).addClass(className.join(' '));
      return nRow;
    }

【讨论】：