jquery数据表分页不适用于json响应

Question

我尝试使用 jquery 数据表对我的 json 响应数据进行分页，但它不起作用。使用数据表 1.10.9。我的代码如下：

$(document).ready(function(){
   $('#invnReport').DataTable({
       "aoColumnDefs": [
           {'bSortable': false, 'aTargets': [] }
       ]
   });
});

$.ajax({
   data    : data,
   url     : url,
   type    : "get",
   dataType: 'json',
   error   : function(resp) {
       alert('Error');
   },
   success : function(resp) {
       render_to_inventory(resp);
   }
});

function render_to_inventory(resp){
   table = '';
   $.each(resp,function(indx,obj){
        table += '<tr>';
        table += '<td>'+parseInt(indx+1)+'</td>';
        table += '<td>'+obj.Inventory.groups+'</td>';
        table += '<td>'+obj.Inventory.quantity+'</td>';
   });

   $("tbody#invn_body").append(table);
}

这是桌子

<table class="table table-striped table table-hover table table-bordered table table-condensed" id="invnReport">
    <caption>
        Inventory Report  
    </caption>
    <thead >
        <tr style="background:#CACACA">
            <th>Sl</th>
            <th>Item</th>
            <th></th>
        </tr>
        <tr style="background:#4BB1CF">
            <th style="width:4%">No</th>
            <th>Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody id="invn_body">
    </tbody>
</table>

这里是json响应数据

[
    {"Inventory":{"groups":" Laptop","quantity":"1"}},
    {"Inventory":{"groups":" Laptop","quantity":"1"}},
    {"Inventory":{"groups":" Laptop","quantity":"2"}},
    {"Inventory":{"groups":" Laptop","quantity":"1"}},
    {"Inventory":{"groups":" Laptop","quantity":"-1"}},
    {"Inventory":{"groups":" Laptop","quantity":"23"}},
    {"Inventory":{"groups":" Laptop","quantity":"6"}},
    {"Inventory":{"groups":" Laptop","quantity":"13"}},
    {"Inventory":{"groups":" Laptop","quantity":"1"}},
    {"Inventory":{"groups":" Laptop","quantity":"3"}},
    {"Inventory":{"groups":" Laptop","quantity":"1"}},
    {"Inventory":{"groups":" Laptop","quantity":"1"}}
]

它使用 php 数据但不使用 json 数据。请帮助。

Answer 1

好的，这一次，给出的代码没有多大帮助，我不得不重写一些部分才能正常工作。这里的第一个错误是您在 DOM 就绪时调用 DataTable() 函数，而不是在 ajax 就绪时调用。在填充表格的函数中移动它应该可以解决您的问题。我为你做了一个小提琴，希望对你有帮助。

http://jsfiddle.net/v8e24q3j/3/

function render_to_inventory(resp) {
table = '';


$.each(resp, function(indx, obj) {

    table += '<tr>';
    table += '<td>' + parseInt(indx + 1) + '</td>';
    table += '<td>' + obj.Inventory.item_name + '</td>';
    table += '<td>' + obj.Inventory.quantity + '</td>';

});
$("tbody#invn_body").append(table);

// Make the DataTable after the data is populated
$('#invnReport').DataTable({
    "pagingType": "numbers"
});

}