如何在使用jQuery添加新行时刷新简单的Datatables表

我认为这个应该很简单，但我找不到一个不是关于ajax加载的数据或数组中提供的数据的引用。我在现有HTML表上使用DataTables，其基本代码如下：

  $('table.wizard').dataTable({
        lengthChange: false,
        iDisplayLength: 100,
        order: [[9, 'desc']]
    });

我正在动态地向表中添加行，因为数据记录如下所示：

var $body = $('table.wizard tbody');
$tr = $("<tr>").appendTo($body).attr({ 'id': 'sku' + item.MerchantSKU, 'data-sku': item.MerchantSKU });
// then append the individual tds
[snip]
// Now how to tell the datatables it has changed?

var$body=$（'table.wizard tbody'）；
$tr=$（“”）.appendTo（$body）.attr（{'id'：'sku'+item.MerchantSKU，'data sku'：item.MerchantSKU}）；
//然后附加各个tds
[剪报]
//现在如何告诉数据表它已经改变了？

---

如何将新行通知数据表

经过几次实验后，由于文档和示例对于DOM表不是很清楚，因此可以使用与对象和数组相同的

row.add（）

方法来添加HTML

TR

s。然后调用以使更改可见：

e、 g

JSFiddle:

不幸的是，它确实允许您刷新使用jQuery所做的添加（理想情况下，这正是我真正希望允许透明使用数据表的原因）：(

最终解决方案（目前）：

我添加了一个自定义的

appendRow（）

jQuery扩展，它检查表是否是DataTable，并在需要时通过DataTables api重定向追加：

// Assume we only append to one table at a time (otherwise rows need to be cloned)
$.fn.appendRow = function ($rows) {
    if ($(this).parent().hasClass("dataTables_wrapper")) {
        var dt = $(this).dataTable().api();
        $rows.each(function () {
            dt.row.add(this);
        });
        dt.draw();
    } else {
        $(this).append($rows);
    }
}

---

jsiddle:

一行：dt.row.add（$tr.draw（））@Daniel:我正在寻找一种方法，允许jQuery添加独立于DataTables，允许同一个表在DataTables打开或关闭时可用。如果您的表工作正常，那么应该编写一个函数，检查您的表是否由带有

DataTables\u wrapper

样式类的元素包装，以及如果是这样，请调用datatables刷新代码，否则请调用普通表刷新代码（如果有的话）@Daniel:好主意。至少它只有一个代码路径。我可能会将其包装为

$（元素）。appendRow（）

jQuery扩展并将其发布到此处。dataTables api正在添加

dataTables\u包装器

类…您只需检查它是否存在。。。

// Assume we only append to one table at a time (otherwise rows need to be cloned)
$.fn.appendRow = function ($rows) {
    if ($(this).parent().hasClass("dataTables_wrapper")) {
        var dt = $(this).dataTable().api();
        $rows.each(function () {
            dt.row.add(this);
        });
        dt.draw();
    } else {
        $(this).append($rows);
    }
}