Question

我实施了动态列可见性来隐藏/显示列，例如DT.columns(5).visible(true)和DT.columns(5).visible(false)显示/隐藏第5列。我还有createdRow的回调，让我们说第5列的文本中有一个html按钮。

目前在createdRow我检查this.api().columns(5).visible()，如果是，那么我继续执行$('td:eq(5)',row).html('<button>'+data[5]+'</button>')单元格内容，如果是，则返回，否则我将覆盖当前的第5个<td>这不是预期的。但是当我取消隐藏第5列时，由于我没有运行上一段代码，因此它出现在文本中。

我希望能够运行代码并在第5列中缓存单元格的html，这样当它被取消隐藏时，就会出现预期的<button>。最好的方法是什么？ column-visibility事件？

请注意，我知道我可以使用render: function (...) {}选项作为列，但我不想要使用它，因为它会影响表的原始数据并影响过滤和搜索 - 我希望原始数据不受影响，这就是我使用createdRow或rawCallback回调的原因。

假设第5列在visibile: false初始化对象中有DataTable，如下所示：

var DT = $('#dt').DataTable({
  ...
  createdRow: function (row, data) {
    if (this.api().column(5).visible()) {
      $('<button>' + data[5] + </button>')
        .appendTo($('td:eq(5)',row).text(''));
  }
);

干杯

Answer 1

使用columnDefs和'render'函数来代替......

var DT = $('#dt').DataTable({
    ...
  "columnDefs":[
            {
            'targets':[0],
            'visible':false,
            'render':function(data, type, row, meta){
                 ...
             }
    ]
});

https://datatables.net/reference/option/columns.render

https://datatables.net/reference/option/columns.data

DataTables - createdRow与动态列隐藏/取消隐藏

1 个答案: