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

我认为这个很简单，但我找不到与 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?

如何通知 DataTables 有关新行的信息？

经过几次实验，由于文档和示例对于 DOM 表不是很清楚，事实证明您可以使用相同的row.add()添加 HTML 的方法TR就像对待对象和数组一样。然后您调用draw() method http://www.datatables.net/examples/api/add_row.html使更改可见：

e.g.

dt.row.add($tr);
dt.draw();

JSFiddle： http://jsfiddle.net/TrueBlueAussie/HEDvf/2205/ http://jsfiddle.net/TrueBlueAussie/HEDvf/2205/

不幸的是，它确实允许您刷新使用 jQuery 添加的内容（理想情况下，这是我真正想要允许透明使用 DataTables 的）:(

最终解决方案（目前）：

我添加了一个自定义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);
    }
}

JSFiddle： http://jsfiddle.net/TrueBlueAussie/HEDvf/2212/ http://jsfiddle.net/TrueBlueAussie/HEDvf/2212/