javascript - 具有不同列数的数据表

Question

我正在使用 ajax 加载数据并在我的 DataTable 中动态生成列名。我的 DataTable 有不同的列数，具体取决于用户的选择。(有一个下拉列表)。

例如，下拉列表中有Southern Province和Northern Province两个选项。 Southern Province 表有 4 列，Northern Province 表有 6 列。

场景一

第一个用户选择 Southern Province，它有 4 列。然后它生成表没有错误，但是之后如果用户选择具有 6 列的 Northern Province，则不会生成表并且 js 控制台打印错误如下。

未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:3828 的属性“样式”

场景二

第一个用户选择 Northern Province，它有 6 列。然后它生成表没有错误，但是之后如果用户选择具有4列的Southern Province，则不会生成表并且js控制台打印错误如下。

未捕获的类型错误:无法读取未定义的 jquery.dataTables.js:6122 的属性“mData”

但如果两个表的列数相同，则两个表都不会出错。

我该如何解决这个问题？

这是JS代码

jQuery(document)
.ready(
function() {
    $('#province-list').change(
            function() {
                var prov = $(this).val();
                if (prov == "sp") {
                    make_SP();
                } else if (prov == "np") {
                    make_NP();
                }
            });
    function make_SP() {
    $("#dataTables-res_item")
    .dataTable(
    {
        "bDestroy" : true,
        "bProcessing" : false,
        "bServerSide" : true,
        "sAjaxSource" : "/province_list_view?p_name=sp",
        "aoColumns" : [
                {
                    "mData" : "result_date",
                    "sTitle" : "Result Date"
                },
                {
                    "mData" : "result_day",
                    "sTitle" : "Result Day"
                },
                {
                    "mData" : "draw_number",
                    "sTitle" : "Draw Number"
                },
                {
                    "mData" : "draw_time",
                    "sTitle" : "Draw Time"
                } ],
        "order" : [ [ 0, "desc" ] ]
        });
    };                  
    function make_NP() {
        $("#dataTables-res_item")
        .dataTable(
        {
            "bDestroy" : true,
            "bProcessing" : false,
            "bServerSide" : true,
            "sAjaxSource" : "/province_list_view?p_name=np",
            "aoColumns" : [
                    {
                        "mData" : "result_date",
                        "sTitle" : "Result Date"
                    },
                    {
                        "mData" : "result_day",
                        "sTitle" : "Result Day"
                    },
                    {
                        "mData" : "draw_number",
                        "sTitle" : "Draw Number"
                    },
                    {
                        "mData" : "draw_time",
                        "sTitle" : "Draw Time"
                    },
                    {
                        "mData" : "draw_place",
                        "sTitle" : "Draw Place"
                    },
                    {
                        "mData" : "draw_person",
                        "sTitle" : "Agent"
                    } ],
            "order" : [ [ 0, "desc" ] ]
        });
    };
});

Answer 1

当更新后的数据与之前的数据列数不同时，我遇到了同样的问题。配方非常简单!在列数发生变化的情况下，Destroy 函数 与$ 结合使用("#datatable").empty();。因此，在重新加载数据之前，您的代码将包含以下几行:

if (dataTableObject) { // Check if DataTable has been previously created and therefore needs to be flushed

    dataTableObject.fnDestroy(); // destroy the dataTableObject
    // For new version use table.destroy();
    $('#' + DataTableDivID).empty(); // Empty the DOM element which contained DataTable
    // The line above is needed if number of columns change in the Data
    }
// DataTable data loading/reloading codes comes here

总的来说，您的代码可能如下所示:

if(dataTableObject) { // Check if table object exists and needs to be flushed
    dataTableObject.fnDestroy(); // For new version use table.destroy();
    $('#myTable').empty(); // empty in case the columns change
}

var data = (province=='sp') ? sp : np;
var columns = (province=='sp') ? spColumns : npColumns;

dataTableObject = $('#myTable').DataTable({
        columns: columns,
        data:    data
    });