修改单元格类时提高 DataTable 性能答案

【问题标题】：Improve DataTable performance when modifying class of cell修改单元格类时提高 DataTable 性能
【发布时间】：2017-11-13 12:42:24
【问题描述】：

我对使用 jquery DataTables 非常满意，但是我发现了一种需要提高性能的情况。我正在根据数据更新单元格的类。为此，我使用渲染函数并从设置中创建一个 api 实例以通过 api 获取单元格。有没有更好的方法来做到这一点？

{
        "data": "statusText", "className": "status",
        "render": function (data, type, full, meta) {
            switch (type) {
                case "display":
                    var api = new $.fn.dataTable.Api(meta.settings);
                    var td = api.cell({ row: meta.row, column: meta.col }).node();                         
                    switch (full.status) {
                        case Status.Saved:
                            $(td).addClass("status-saved");
                            break;
                        case Status.Sent:
                            $(td).addClass("status-sent");
                            break;
                        default:
                            $(td).addClass("status-saved");
                    }  
                    return full.statusText;
                case "sort":
                    return full.status;
                default:
                    return full.statusText;
             }
        }
    }

【问题讨论】：

标签： javascript jquery performance datatables styling

【解决方案1】：

我可以看到的一种可能性是，如果您设法使 api 和 td 脱离渲染功能。因为那看起来像是繁重的操作。

并像下面那样制作td，这可能会起作用。

var td = $(api.cell({ row: meta.row, column: meta.col }).node());

您还可以做的是使用 vanillaJS 而不是 addClass

【讨论】：

谢谢！好的建议。我相信它会表现得更好。但我找到了可以附加到表选项并接收对 DOM 行的引用的 rowCallback。类似于渲染回调，但不需要新建 api 和查找单元格。

【解决方案2】：

发现rowCallback(documentation here)方法比render方法好。在 rowCallback 中，我们可以访问 DOM 行，而不必新建 api 实例并查找单元格。我仍然使用 jQuery 和 addClass 来设置类。将尝试使用普通香草而不是 jQuery 来尝试进一步提高性能。正如@shyammakwana.me 所建议的那样

【讨论】：