jquery data table pagination not working with json response

Question

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.

VladNeacsu · Accepted Answer · 2015-10-28 09:04:03Z

1

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

}

answered Oct 28, 2015 at 9:04

VladNeacsu

1,28816 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

VladNeacsu Over a year ago

If this works, can you approve the answer please? I'm here for more questions if you want

user5384372 Over a year ago

thanks for your response.. there is another problem. what to do if I want to paginate the same table with both the php and json data.

VladNeacsu Over a year ago

Well, you would use the data from PHP to render the DataTable on pageload as you did with the document ready function, and leave the ajax function as is. Just append the data and then call DataTable() again. Should work

annoyingmouse Over a year ago

Funnily enough I was playing with the initial load and then ajax requests afterwards yesterday and came up with this JSFiddle (jsfiddle.net/annoyingmouse/6b50dtdL). It has initial mocked ajax load, which could be just static data, and then a number of subsequent mocked ajax calls. I'm taking fro granted that there is a unique id and that it shouldn't be duplicated. So the processing of the ajax takes into account a random number of returned rows and checks to see if the row already exists before adding them to the table. It was much fun to write ;-)

VladNeacsu Over a year ago

Please approve the answer as it responds to your initial question. Glad to see it works

|

Collectives™ on Stack Overflow

jquery data table pagination not working with json response

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related