CODEWITHSUNDEEP
jqueryjsondatatables
user5384372
user5384372

Reputation:

jquery data table pagination not working with json response

i tried to paginate my json response data using jquery data table.but its not working. Using dataTables 1.10.9. My code is given below :

$(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);
}

here is the 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>

here is the json response data 

[
    {"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"}}
]

its working with php data but not with json data.please help.

Upvotes: 1

Views: 1032

Answers (1)

VladNeacsu
VladNeacsu

Reputation: 1288

Ok, for once, the code given is not helping much, I had to rewrite some parts for it to work ok. A first mistake here is that you are calling the DataTable() function when the DOM is ready, and not when the ajax is ready. Moving that in the function that populates the table should fix your problem. I have made a fiddle for you, hope this helps.

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"
});

}

Upvotes: 1

Related Questions