DataTable drawCallback 是如何工作的？答案

【问题标题】：How does DataTable drawCallback work?DataTable drawCallback 是如何工作的？
【发布时间】：2016-07-13 21:00:48
【问题描述】：

我正在尝试使用drawCallback()，根据其值将CSS 应用于每个DataTable 单元格。CSS 应用于几个单元格，而不是全部。这是我的问题的JsFiddle。有没有人遇到这个问题并找到解决方案或对此有任何想法。请提出建议！

  "drawCallback": function( settings ) {
        var api = this.api();
        var visibleRows=api.rows( {page:'current'} ).data();
        if(visibleRows.length >= 1){
        for(var j=1;j<visibleRows[visibleRows.length -1].length;j++){
          $("td:eq("+j+")", settings.nTBody.childNodes[visibleRows.length -1]).addClass(visibleRows[visibleRows.length -1][j]);
        }
        }
    },

【问题讨论】：

可能看看行渲染回调datatables.net/examples/advanced_init/row_callback.html不清楚你的目标是什么

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

就像@charlietfl 所说，您并不想使用drawCallback 来格式化行，您最好使用createdRow (rowCallback) 来进行这种格式化。

drawCallback 在每个绘图事件上都会被调用，这意味着它实际上是用来更新刚刚添加的行或处理刚刚更新的数据。

另一方面，createdRow 被设计为在创建行时调用，这似乎是您真正想要的。在this documentation (example) 中，您可以看到作者展示了如何使用此选项将类添加到某些行，这似乎与您想要做的最接近。

据我所知，您想让每个单元格都有一个与单元格中的文本相同的 CSS 类（如果我错了，请纠正我）。使用createdRow 最简单的方法如下：

"createdRow": function ( row, data, index ) {
    for(var i = 0;i<data.length;i++){
        $('td', row).eq(i).addClass(data[i]);
        //The above line assumes that you want to add a CSS class named "red" to a 
        //field that has the text "red" in it, if not, you can change the logic
    }
}

只需将其包含在 .DataTables() 调用的初始化选项中即可。

我不得不对将哪些类添加到哪些列的确切逻辑做出一些假设，但如果它们是正确的，那么这应该为每个字段添加一个与该字段中的文本命名相同的类。

【讨论】：