javascript - 数据表 - 刷新/重新加载 ajax 不起作用

Question

大家好，我能够成功创建一个数据表，该数据表可以从 ajax 调用中获取数据。所以初始加载工作正常。我创建了一个名为刷新的按钮，我希望如果我调用我的函数initiatearchiveIncidents，它会再次获取我的数据并重新加载表，但我收到错误cannot re-initialise the数据表。

所以我尝试执行 dtTable.ajax.reload(); 但这失败了，因为它不理解我的 ajax 调用。有人知道如何正确执行此操作吗？

    initiatearchiveIncidents: function () {

        $.getJSON(this.basePath() + '/XPROD_Incidents?$filter=ÉtatValue%20eq%20%27Fermé%27&$orderby=Modifié asc',
            function (data) {
            //Sharepoint REST returns a nested data format, so we go deep to get the useful parts
              var myData = data.d.results;
              moment.locale('fr');

            //this is the key part of datatables       
                dtTable = $('#example').DataTable({

                    data: myData,
                    columns:[
                        {
                                "width": "30px",
                                sortable: false,
                                "render": function (data, type, full, meta) {
                                return "<button class='edit_button btn btn-default btn-sm' name ='btnSubmit' type='button' value='Edit' data-ID='"+full.ID+"'><i class='fa fa-pencil fa-2'></i></button>";
                                }
                        },
                        { data: "Incident", "width": "75px" },        
                        {
                                "width": "65px",
                                sortable: false,
                                "render": function (data, type, full, meta) {
                                return "<h4><span class='priorité_span'>"+full.PrioritéValue+ "</span></h4>";
                                }
                        },      
                        { data: "Composante","width": "75px",className: "over_flow_control" },         
                        { data: "Description","width": "300px",className: "over_flow_control" },
                        { data: "Début_imputabilité","width": "100px"  },
                        { data: "ResponsableValue","width": "100px",className: "over_flow_control"  }

                        ],
                        "order": [[ 5, "desc" ]],
                    "drawCallback": function( settings ) {
                    IncidentManager.table_conditional_format();
                    $('#loading').hide("slow");
                    },

                })
            });

    },  

Answer 1

您需要重写 initiatearchiveIncidents() 函数，以通过 ajax.url 和 ajax.dataSrc 选项使用 jQuery DataTables Ajax 功能，请参阅下面。

当需要重新加载数据时，只需调用$('#example').DataTable().ajax.reload()即可，参见ajax.reload()了解更多详情。

initiatearchiveIncidents: function() {

    moment.locale('fr');

    //this is the key part of datatables       
    dtTable = $('#example').DataTable({
        ajax: {
            url: this.basePath() + '/GDI_PROD_Incidents?$filter=ÉtatValue%20eq%20%27Fermé%27&$orderby=Modifié asc',
            dataSrc: "d.results"
        },
        columns: [
            {
                "width": "30px",
                sortable: false,
                "render": function(data, type, full, meta) {
                    return "<button class='edit_button btn btn-default btn-sm' name ='btnSubmit' type='button' value='Edit' data-ID='" + full.ID + "'><i class='fa fa-pencil fa-2'></i></button>";
                }
            }, {
                data: "Incident",
                "width": "75px"
            }, {
                "width": "65px",
                sortable: false,
                "render": function(data, type, full, meta) {
                    return "<h4><span class='priorité_span'>" + full.PrioritéValue + "</span></h4>";
                }
            }, {
                data: "Composante",
                "width": "75px",
                className: "over_flow_control"
            }, {
                data: "Description",
                "width": "300px",
                className: "over_flow_control"
            }, {
                data: "Début_imputabilité",
                "width": "100px"
            }, {
                data: "ResponsableValue",
                "width": "100px",
                className: "over_flow_control"
            }

        ],
        "order": [[5, "desc"]],
        "drawCallback": function(settings) {
            IncidentManager.table_conditional_format();
            $('#loading').hide("slow");
        }

    });
},