Я загружаю данные, используя ajax, и динамически генерирую имена столбцов в моей DataTable. Мой DataTable имеет различное количество столбцов, в зависимости от выбора пользователем (есть раскрывающийся список).

Например, в раскрывающемся списке есть 2 варианта:Южная провинция а такжеСеверная провинция. Южная провинция таблица имеет 4 столбца иСеверная провинция Таблица имеет 6 столбцов.

Сценарий 1

Выбор первого пользователяЮжная провинция который имеет 4 столбца. Затем он генерирует таблицу без ошибок, но после этого, если пользователь выбираетСеверная провинция который имеет 6 столбцов, таблица не генерируется и js консольная ошибка печати, как показано ниже.

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

Сценарий 2

Выбор первого пользователяСеверная провинция который имеет 6 столбцов. Затем он генерирует таблицу без ошибок, но после этого, если пользователь выбираетЮжная провинция который имеет 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" ] ]
        });
    };
});