使用 jQuery 添加新行时如何刷新简单数据 tables table

Question

我认为这个很简单，但我找不到与 ajax 加载的数据或数组中提供的数据无关的参考。我在现有 HTML table 上使用 DataTables 并使用以下基本代码：

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

我正在向 table 动态添加行，因为数据记录是这样找到的：

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

经过几次实验，由于DOMtable的文档和例子都不是很清楚，原来你可以使用相同的row.add()方法添加HTML TRs 就像你对对象和数组一样。然后调用 draw() method 使更改可见：

例如

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

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

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

最终解决方案（暂时）：

我添加了一个自定义 appendRow() jQuery 扩展，它检查 table 是否是 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 添加新行时如何刷新简单数据 tables table

How to refresh a simple Datatables table when adding new rows with jQuery

jquery

datatables

jquery-datatables