为 JQUERY 数据表中新插入的行指定类答案

【问题标题】：Specifiying TD class for newly inserted row in JQUERY datatable为 JQUERY 数据表中新插入的行指定类
【发布时间】：2015-10-12 07:23:37
【问题描述】：

我有一个使用 JQUERY Datatable 插件呈现的表。我正在尝试通过此代码向表中添加新行

var oTable = $('#table_question').DataTable();
oTable.row.add(['', '', '']);

但是当新行被插入时，它上面的行中的每个 TD 都没有任何类。所以我需要将 col-1 类添加到第一列，将 col-2 类添加到第二列。在添加自身时如何指定这些类？另外，在通过 row.add

添加新行时，如何为每个单元格提供任何特定模板

【问题讨论】：

标签： jquery datatables

【解决方案1】：

要将不同的类添加到新添加的行中的不同列/<td>，请通过column(<index>).nodes().to$() 将每个<td> 访问为jQuery 实例：

var row = table.row.add(['someValue', 'someOtherValue']);
table.row(row).column(0).nodes().to$().addClass('testClass1');
table.row(row).column(1).nodes().to$().addClass('testClass2');
table.row(row).draw();

带有按钮和弹出窗口的演示，用户可以在其中动态添加新行，并为每个 <td> 添加不同的 CSS 类 -> http://jsfiddle.net/3vp55tgh/

【讨论】：

谢谢朋友.. 太完美了
但这很慢，如果数据有数千行并且它们来自 AJAX...
@Boolean_Type，同意，但如果您有数千行，则无论如何您都在使用serverSide

【解决方案2】：

缓存你新添加的row和addClass通常如下：

var oTable = $('#table_question').DataTable();
var rowNode = oTable.row.add(['', '', '']);
$( rowNode ).addClass('anyclass');

这是添加 single row 和 multiple rows

时的文档

【讨论】：

你确定 $(rowNode).addClass 会起作用吗，因为它是数据表 API 实例，它的结果集中只有新行。
是的..我试过了...但是 addClass 不起作用，因为它的（rownode）只有数据表对象而不是 TD
对不起..我没有使用节点方法。但我使用 draw(false)
您不应该尝试在 dataTables API 之外操作 dataTable 实例的内容。
嘿@GuruprasadRao，但它会导致严重错误 -> jsfiddle.net/8vykd8pk [和 jQuery 错误，而不是“只是”dataTables 错误，所以真的很糟糕 :-)]我相信该部分的文档完全是错误的。 to$() 或 toJQuery() 让您可以访问作为 jQuery 实例存储在 dataTables 内部的实际元素。

【解决方案3】：

如果有数千行并且它们来自 AJAX（在我的情况下是自定义 AJAX 实现：前 50 行来自服务器，下一行部分在循环中加载 - 每批 50 行，则接受的解决方案工作非常慢)。

以下解决方案对我有帮助：

var table = $('#tableID').DataTable({
    'createdRow': function (row, data, dataIndex) {
         //no jQuery, just native JS to ensure fast
         row.children[0].classList.add("col-md-1");
         row.children[1].classList.add("col-md-3");
         row.children[2].classList.add("col-md-2");
     }
});

【讨论】：

我同意，使用 jQuery 是一个可笑的瓶颈。但是如果你有这个确切的需求，为什么不在columns 或columnDefs 定义中使用className 呢？
@davidkonrad ，是的，你是对的。这个解决方案很快。