小编典典

具有不同列数的数据表

ajax

我正在使用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" ] ]
        });
    };
});

阅读 246

收藏
2020-07-26

共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从服务器实现(例如,如果要为不同的语言使用不同的标题)。“皮带和括号”
:)

2020-07-26