jquery - 使用ajax json加载数据后Bootstrap数据表不起作用

Question

我正在将数据动态加载到 html 表中，如下所示 使用的技术栈是: Spring MVC Hibernate Ajax JQuery 但数据表功能没有响应

function getdata()
     {
            $.ajax({

            type: "GET",
             url: "/controllerURL.html", //controller URL
             contentType: "application/json; charset=utf-8",
             dataType: "json",    

             success: function (results) {
                console.log(results)
                 var success = results.success;
                if(success){
                var finaldata = "<tbody><thead><tr><th>ID</th><th>data1</th><th>data2</th><th>Update</th></tr></thead>"; //data
                var data = results.message;
                    data = jQuery.parseJSON(data);
                alert(data);
                    for(var i = 0; i < data.length; i++){
                        var value = data[i];                
                        finaldata = finaldata+  "<tr><th>"+value.ID+"</th><th>"+value.variable1+"</th><th>"+value.variable2+"</th></tr>";
                                                    }
                    finaldata = finaldata + "</tbody>";
                $("#tableID").html(finaldata);
                $("#tableID").DataTable();//re-intializing datatable
                 }            
             },
             error: function (data) {       
                alert("fail");
             console.log('ajax call error');    

             }
         });
     }

此后数据表功能不起作用

Answer 1

您需要具有适当的表结构 <thead></thead>和<tbody></tbody> 。还编号th元素应与 td 的数量匹配元素。

假设代码的其他部分工作正常，请改用下面的代码:

function getdata() {
    $.ajax({
        type: "GET",
        url: "/controllerURL.html", //controller URL
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function(results) {
            console.log(results)
            var success = results.success;
            if (success) {
                var finaldata = "<thead><tr><th>ID</th><th>data1</th><th>data2</th><th>Update</th></tr></thead><tbody>"; //data
                var data = results.message;
                data = jQuery.parseJSON(data);
                alert(data);
                for (var i = 0; i < data.length; i++) {
                    var value = data[i];
                    finaldata = finaldata + "<tr><td>" + value.ID + "</td><td>" + value.variable1 + "</td><td>" + value.variable2 + "</td><td></td></tr>";
                }
                finaldata = finaldata + "</tbody>";
                $("#tableID").html(finaldata);
                $("#tableID").DataTable();
            }
        },
        error: function(data) {
            alert("fail");
            console.log('ajax call error');

        }
    });
}