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

Question

我认为这个很简单,但是找不到与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新行？

Answer 1

经过一些实验,由于DOM表的文档和示例不是很清楚,事实证明,您可以使用相同的row.add()方法添加HTML,TR就像对象和数组一样.然后,您可以调用该draw()方法以使更改可见:

例如

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

JSFiddle: 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/