Question

我有什么

一种主细节设置。主数据表有一个复选框列，点击哪个触发器是一个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.");
    });
}

执行绑定到详细信息表的函数：

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>';

                             }
                         }

        ]
    });
}

未发生的事情

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

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

Cannot reinitialise DataTable

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

提前致谢。

Answer 1

使用destroy选项：

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

销毁与选择器匹配的任何现有表，并替换为新选项。

但是，您可以自己创建dataTable AJAX，而不是使用AJAX调用的结果填充data：

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

这样，您只需在table.ajax.reload()更改时致电inProductId。

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

1 个答案: