使用 ajax json 加载数据后，引导数据表无法正常工作答案

【问题标题】：Bootstrap datatable not working after loading data using ajax json使用 ajax json 加载数据后，引导数据表无法正常工作
【发布时间】：2016-04-08 08:02:45
【问题描述】：

我正在将数据动态加载到 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');    

             }
         });
     }

在此数据表功能不起作用之后

【问题讨论】：

“在这个数据表功能不起作用之后”？？你能解释什么不工作以及什么时候？
搜索，加载数据后分页不起作用
但是您还没有发布任何与任何“搜索”或“分页”相关的代码？那么您是否在控制台中看到错误？您需要帮助我们帮助您！
datatable 是 jquery 中的一个插件，它为您提供自动功能，例如分页、搜索、过滤到您的 html 表
那么“不工作”是什么意思？

标签： jquery html ajax jsp datatables

【解决方案1】：

要在ajax响应上加载动态数据表，请通过以下代码

$.ajax({
     type: "GET",
     url: "Controller/Action",
     async: true,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (data) {
         if (data !== null && data.length > 0) {
             var tableData = JSON.parse(data);

             $("#table0").DataTable().destroy();


             $("#table0").DataTable({
                 dom: "Bfrtip",
                 data: tableData, // this is to be based on your json structure 

                 columns: [

                     {
                         className: 'select-checkbox',

                         orderable: false,

                         data: null,

                         defaultContent: ''

                     },

                     { data: "name" },
                     { data: "position" },
                     { data: "office" },
                     { data: "extn." },
                     { data: "start_date" },
                     { data: "salary" }

                 ],
                 rowReorder: {
                     dataSrc: 'DT_Rowid'
                 },
                 select: {
                     style: 'os',
                     selector: 'td:first-child'
                 }
                 , buttons: [
                     { extend: "create", editor: editor },
                     { extend: "edit", editor: editor },
                     { extend: "remove", editor: editor }
                 ]

             });


         }
     },
     error: function Error(result, error) {
         alert("error " + result.status + " " + result.statusText);
     }
 });}

详解Data table

【讨论】：

【解决方案2】：

$.ajax({..

 success: function(data) {..  

var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
            var j = -1;
            var r = new Array();
// represent columns as array
                r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
                r[++j] = '<td>'+data[key].someval1+'</td>';
                r[++j] = '<td>'+ data[key].someval2+'</td>';
                r[++j] = '<td>'+ data[key].someval13+ '</td>';
                r[++j] ='<td class="last"><a href="view?id='+data[key].id+' title="View"><i class="fa fa-eye"></i></a> <a href="edit?id='+data[key].id+'title="Edit"><i class="fa fa-edit"></i></a> <a href="delete?id='+data[key].id+'onclick="return confirm("Are you sure you want to delete?")" title="Delete"><i class="fa fa-trash"></i></a></td></tr>'; 
                rowNode = table.row.add(r);

        }

        rowNode.draw().node()

   }
}

我的 JSON 响应，

[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]

它对我有用

【讨论】：

【解决方案3】：

您需要使用<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');

        }
    });
}

【讨论】：