具有不同列数的数据表

Question

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

例如，下拉列表中有2个选项，即“ 南部省” 和“ 北部省” 。 南部省 表有4列， 北部省 表有6列。

场景1

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

Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3828

方案2

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

Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6122

但是，如果两个表具有相同的列数，则两个表都会生成而不会出错。

我该如何解决？

这是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

我认为最安全的方法是完全删除表，然后在重新初始化之前将其重新插入DOM。在我看来，dataTables不能完全删除所有生成的内容，这就是为什么会发生错误（由于不同的原因）。从理论上讲，它应该或多或少地如上所述工作，但事实并非如此。考虑以下解决方案：

[下面的演示链接中的完整源代码]

var dataTable,
    domTable, 
    htmlTable = '<table id="example"><tbody></tbody></table>';

function initDataTable(province) {
    if ($.fn.DataTable.fnIsDataTable(domTable)) {
        dataTable.fnDestroy(true);
        $('body').append(htmlTable);
    } 
    var data = (province=='sp') ? sp : np;
    var columns = (province=='sp') ? spColumns : npColumns;    
    dataTable = $("#example").dataTable({
        aaData : data,
        aoColumns : columns
        /* other options here */
    });        
    domTable = document.getElementById('example');
}

$('#province-list').change(function() {
    var prov = $(this).val();
    initDataTable(prov);
});

这可行。参见demo->
http://jsfiddle.net/gss4a17t/
基本上与OP中的相同，但是我对不同的省使用不同的功能，而不是对不同的省使用不同的功能aoColumns。而不是依靠bDestroy，我删除整个<table>用dataTable.fnDestroy(true)（DOM都
和 和数据表注射），然后重新插入<table>重新初始化数据表之前-skeleton。

我不知道这是否适合OP的需求，但是这就是我的方法。它对于将来的更改更加灵活，并且aoColumns-objects可以从脚本自动生成，也可以通过AJAX从服务器实现（例如，如果要为不同的语言使用不同的标题）。“皮带和括号”
:)