Question

我的页面中有一个jquery数据表，我填写了这样的数据：

$(document).ready(function () {
    var datatable;
    $(document).on("click", ".myBtnClass", function () {
        if (datatable != null)
            datatable.destroy();
        datatable = $('#tableProducts').DataTable({
            "pageLength": 50,
            "processing": false,
            "serverSide": true,
            "filter": true,
            "bLengthChange": false,
            "bSort": false,
            "orderMulti": false,

            "ajax": {
                "url": "/Bulk/LoadData/",
                "type": "POST",
                "data": {
                    "username": $(".sellerInput").val(),
                    "drange": $(".select2").val()
                },
                "dataSrc": function (data) {
                    return data.data;
                }

            }
        });
    });
});

所以你可以在这里看到我用我的方法返回的数据填充数据表“LoadData”......

问题出在这一行：

if (datatable != null)
        datatable.destroy();

每次我销毁表格以便用新数据重新创建它时，我都会松开桌子的设计，它会变形并且在被破坏/重新创建之后看起来很难看......

有没有其他方法可以在不实际调用destroy（）方法的情况下将数据重新加载到表中？

Answer 1

您可以尝试两种不同的方法：

<强> 1。销毁/重新制作表格

在表的初始化中添加选项destroy:true，然后删除

 if (datatable != null)
         datatable.destroy();

当您在现有实例上调用initalization函数时，这会告诉数据表销毁并重新复制表。

但是，这可能会使表格的设计陷入困境。

<强> 2。使用ajax.reload（）

另一种可能更好的方法是使用ajax选项中提供的url重新加载数据：

$('#tableProducts').DataTable().ajax.reload();

Here's有关ajax.reload()功能的更多信息。

页面更改或任何其他事件后重绘/重新填充jquery数据表数据集

1 个答案: