如何使用 datatables.js 显示新的/更新的数据

Question

我有什么

一种主要细节设置。主数据table 有一个复选框列，单击哪个触发器是一个 AJAX 调用。

function makeAjaxCall(inProductId) {

    var url = "/Products/GetUpdatesForProduct/"

    var request = $.ajax({
        async: false,
        url: url,
        method: "GET",
        data: { productId: inProductId},
        dataType: "JSON"
    });

    request.done(function (result) {
        if (result.success) {
            console.log(result);
            bindProductUpdates(result);
        }
        else {
            alert("No updates found!");
        }

    });

    request.fail(function (jqXHR, textStatus) {
        console.log(textStatus);
        alert("Request failed.");
    });
}

绑定到细节的函数table:

function bindProductUpdates(productUpdates) {

    var oSettings = $('#productUpdatesTable').dataTable().fnSettings();
    oSettings._iDisplayLength = 5;
    $('#productUpdatesTable').dataTable().fnDraw();

    $('#productUpdatesTable').DataTable({

        "data": productUpdates.UpdatesForProduct,
        "bProcessing": true,
        "bLengthChange": false,
        "bStateSave": true,
        "aoColumns": [
                        {
                            "sName": "",
                            "sClass": "checkbox-column",
                            "bSortable": false,
                            "mRender": function (data, type, full) {
                                return ' <input type="checkbox" value=' + full[1] + ' onclick="javascript:fnProductUpdatesCheckboxClickHandler(this,' + full[1] + ')"; />';

                            }

                        },
                         {
                             "sName": "Updated Date/Time",
                             "bSortable": true,
                             "mRender": function (data, type, full) {
                                 return '<span title=\"' + full[2] + '\">' + full[2] + '</span>';

                             }
                         }

        ]
    });
}

没有发生什么

所以我想做的是使用相同的 table 来显示基于 AJAX 调用结果的新数据。数据结构保持不变。

它适用于第一次点击，但适用于后续点击数据table抱怨：

Cannot reinitialise DataTable

我该怎么做才能让它发挥作用？

提前致谢。

Answer 1

使用destroy选项：

$('#productUpdatesTable').DataTable({
    destroy: true, //<--
    "data": productUpdates.UpdatesForProduct,
    ...
})

Destroy any existing table matching the selector and replace with the new options.

但是，您可以使数据表 AJAX 基于自身，而不是使用 AJAX 调用的结果填充 data :

var table = $('#productUpdatesTable').DataTable({
   ajax : {
     url: "/Products/GetUpdatesForProduct/",
     cache: false,
     data: { productId: inProductId},
     dataSrc: "productUpdates.UpdatesForProduct"  
    },
    "bProcessing": true,
   ...
})

因此，您只需在 inProductId 更改时调用 table.ajax.reload()。

如何使用 datatables.js 显示新的/更新的数据

How to show new / updated data using datatables.js

datatables