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

Posted 2023-03-05

【中文标题】使用 ajax json 加载数据后，引导数据表无法正常工作

【英文标题】：Bootstrap datatable not working after loading data using 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 表

那么“不工作”是什么意思？

【参考方案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');

        
    );