在JQuery数据表中显示不可见列后更改背景颜色

Question

我的表中大约有50列，最初创建表时我隐藏了30列，以加快加载过程。用户可以将列设置为稍后可见。

如果单元格的值大于0，我使用rowCallback设置单元格的背景色。

它只适用于可见列，但不适用于不可见列。

我的代码

var cols = [...]; // 50 columns 
var table = $('#example').DataTable({
   "data":data,
   "columns":cols,
   "columnDefs": [{"targets":[20,22,23,...49], "visible":false}],
   "rowCallback": function (row, data) {
     for (let i =0; i < cols.length; i++) {
        if (data[i] > 0) {
          $(row).find('td:eq(' + i + ')').css('background-color', '#B6E0FF');
        }
     }
   }
}); 

结果看起来不错。

当我将不可见列设置为可见时，

table.column(20).visible(true);

第20列现在可见，但单元格的背景颜色未更改。

如何解决此问题？

Answer 1

在Datatable的回调中，您可以使用jquery css设置td的背景色，您可以在更改可见性后尝试应用此设置。

类似于：

 table.column(20).visible(true);
 //get the 20th col
 $('#example td:nth-child(20)').css('background-color', '#B6E0FF');