Ich lade Daten mit Ajax und generiere Spaltennamen dynamisch in meiner Datentabelle. Meine Datentabelle hat abhängig von der Auswahl durch den Benutzer eine unterschiedliche Anzahl von Spalten. (Es gibt eine Dropdown-Liste.)

Zum Beispiel gibt es 2 Optionen in der Dropdown-Liste als Südprovinz undNorthern Province. Südprovinz Tabelle hat 4 Spalten undNorthern Provinceie Tabelle @ enthält 6 Spalten.

Szenario

Erster Benutzer wähle Südprovinz hat 4 Spalten. Dann erzeugt es eine Tabelle ohne Fehler, aber danach, wenn der Benutzer @ auswähNorthern Province mit 6 Spalten, Tabelle wird nicht generiert und js Konsolendruckfehler wie unten.

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

Scenario 2

Erster Benutzer wähleNorthern Province hat 6 Spalten. Dann erzeugt es eine Tabelle ohne Fehler, aber danach, wenn der Benutzer @ auswäh Südprovinz mit 4 Spalten, Tabelle wird nicht generiert und js Konsolendruckfehler wie unten.

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

Aber wenn beide Tabellen die gleiche Anzahl von Spalten haben, werden beide Tabellen ohne Fehler generiert.

Wie kann ich das lösen?

Hier ist der JS-Code

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" ] ]
        });
    };
});