具有不同列数的DataTable

Question

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

例如,南部省和北部省的下拉列表中有2个选项.南部省表有4列,北部省表有6列.

场景1

第一个用户选择有4列的南方省.然后它生成表没有没有错误,但之后如果用户选择Northern Province有6列,表不生成和js控制台打印错误如下.

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

情景2

第一个用户选择有6列的Northern Province.然后它生成表没有没有错误,但之后如果用户选择有4列的南方省,表不生成和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

当我的更新数据具有与先前数据不同的列数时,我遇到了同样的问题.配方非常简单!在时,有一个场景中的列数的变化,Destroy function工作与一起$("#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
    });

Answer 2

我认为最安全的方法是完全删除表,然后在重新初始化之前将其重新插入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);
});

这有效.请参阅演示 - > http://jsfiddle.net/gss4a17t/ 基本上它与OP中的相同,但不同省份的功能不同,我aoColumns对不同的省份做了不同的事情,依此类推.而不是依靠bDestroy,我删除整个<table>用dataTable.fnDestroy(true)(DOM都和和数据表注射),然后重新插入<table>重新初始化数据表之前-skeleton.

我不知道这是否适合OP的需要,但这就是我要做的.它对于将来的更改更加灵活,并且 - aoColumns对象可以从脚本自动生成或通过AJAX从服务器实现(例如,如果您希望针对不同语言使用不同的标题)."腰带和大括号":)