DataTables 根据一个人的值将数据替换为多列

Question

我正在尝试制作一个条件语句，它不仅将数据替换到我的目标列，而且还会根据所选目标的值替换第二个列。

 setTimeout(function() {
  $('#invoices-table').DataTable({
    responsive: true,
    columnDefs: [{ orderable: false, targets: [-1, -2, -3] }, {
      targets: 0, // statement is based on first column data
      render: function(data, type) {
        // if data in col0 is "1" then replace data in col0 and col5 (pay button)
        if (type == 'display' && data == '1') {
          return [
            { data: '<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>', target: 0 },
            { data: '<button class="pay-btn btn btn-sm btn-success disabled">Paid</button>', target: 5 }
          ]
        } else {
          return [
            { data: '<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>', target: 0 }
          ]
        }
      },
    }],
    "lengthMenu": [
      [100, 5, 25, 50, -1],
      [100, 5, 25, 50, "All"]
    ],
    dom: 'Bfrtip',
    initComplete: function() {
      var api = this.api();
      // my actions upon complete
    }
  });
 }, 1500); // delay is needed due to needed time of mySQL for passing results

https://codepen.io/anon/pen/jmgBdv?editors=0010

编辑

由于目标编号错误，更新了 post 和 codepen 上的代码

Answer 1

如果您按照上一个答案中的建议查看column.render，那么您会看到render 回调有更多参数：

render: function ( data, type, full, meta ) {

columnDefs 中的每个部分都可以有多个目标，但targets 指的是列索引，而不是数据！所以你有一点错误。含义是：您可以将相同的结果字符串传递给多个列，即在一个回调中处理带有复选框的列 - 但不区分同一columnDefs部分中的目标（列）和不同的返回字符串。这没有多大意义，而且很难实施。

从逻辑上讲，如果您想要不同列的不同值，则使用不同的columnDefs 部分。 full 参数保存该行的所有值，因此即使您的目标是第 14 列，您也可以使用 full 检查第 0 列的值。这是你应该做的：

columnDefs: [
  { orderable: false, targets: [-1, -2, -3] }, 
  { targets: 0, 
    render: function(data, type) {
      if (type == 'display') {
        return data == '1' 
          ? '<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>'
          : '<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>'
      } else {
         return data
      }
    }
  },
  { targets: 14, 
    render: function(data, type, full) {
      if (type == 'display') {
        return full[0] == '1' 
          ? '<button class="pay-btn btn btn-sm btn-success disabled">Paid</button>'
          : '<button class="pay-btn btn btn-sm btn-success">pay</button>'
      } else {
        return data
      }
    }
  }
]