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() method以显示更改：

e.g。

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/

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

1 个答案: