json - Pagination not working when Dynamic result is displayed to datatable <tbody> -

using datatable (bootstrap ) i displaying result of ajax in part of datatable . result ged addded datable pagination not working on new result page loads once.who pagination work on new displayed result. in advance.

 <script>     $(document).ready(function () {          $('.datatables-example').datatable();      });                      var data = $.parsejson(responsedata);                     var tbl_op ='';                     $.each(data.result,function(k,v){                         console.log(v.id);                         $('.datatables-example').datatable();                         tbl_op +="<tr class='odd gradex'>"+                             '<td>'+v.id+'</td>'+                             '<td>'+v.country_name+'</td>'+                             '<td>'+v.created+'</td>'+                            '<td>'+'<a href="#" onclick="edit('+v.id+','+v.country_name+')">edit</a></td>'+                           '</tr>';                         });                      $('#country_list').html(tbl_op);                      $('#response').fadein(1000);                      $('#response').html(data.response_msg);                      $('#response').fadeout(8000);               </script>              <div class="table-responsive">                   <table class="table table-striped table-bordered table-hover datatables-example" id="datatables-example">                     <thead>                       <tr>                         <th>id</th>                         <th>country</th>                          <th>date</th>                          <th>action</th>                       </tr>                     </thead>                     <tbody id='country_list'>                       </tbody>                   </table>                 </div> 

result:

<tbody id="country_list"><tr class="odd gradex"><td>1</td><td>india</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(1,india)">edit</a></td></tr><tr class="odd gradex"><td>2</td><td>usa</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(2,usa)">edit</a></td></tr><tr class="odd gradex"><td>3</td><td>russia</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(3,russia)">edit</a></td></tr><tr class="odd gradex"><td>4</td><td>r1</td><td>2016-09-13 11:33:42</td><td><a href="#" onclick="edit(4,r1)">edit</a></td></tr><tr class="odd gradex"><td>5</td><td>r5</td><td>2016-09-13 11:34:30</td><td><a href="#" onclick="edit(5,r5)">edit</a></td></tr><tr class="odd gradex"><td>6</td><td>r6</td><td>2016-09-13 11:34:40</td><td><a href="#" onclick="edit(6,r6)">edit</a></td></tr><tr class="odd gradex"><td>7</td><td>r7</td><td>2016-09-13 11:34:48</td><td><a href="#" onclick="edit(7,r7)">edit</a></td></tr><tr class="odd gradex"><td>8</td><td>r8</td><td>2016-09-13 11:34:54</td><td><a href="#" onclick="edit(8,r8)">edit</a></td></tr><tr class="odd gradex"><td>9</td><td>r9</td><td>2016-09-13 11:35:00</td><td><a href="#" onclick="edit(9,r9)">edit</a></td></tr><tr class="odd gradex"><td>10</td><td>r10</td><td>2016-09-13 11:35:07</td><td><a href="#" onclick="edit(10,r10)">edit</a></td></tr><tr class="odd gradex"><td>11</td><td>r11</td><td>2016-09-13 11:35:13</td><td><a href="#" onclick="edit(11,r11)">edit</a></td></tr><tr class="odd gradex"><td>12</td><td>r12</td><td>2016-09-13 11:35:25</td><td><a href="#" onclick="edit(12,r12)">edit</a></td></tr><tr class="odd gradex"><td>13</td><td>r67</td><td>2016-09-13 11:37:30</td><td><a href="#" onclick="edit(13,r67)">edit</a></td></tr></tbody> 

in order have pagination updated on xhr requests, need have information pagination well. is:

• current page number
• total amount of entries
• the amount of entries show per page

this information should returned xhr request. example add these properties result object (result.currentpage, result.totalpages, result.totalentries).

now each concurrent request should send these parameters server, , server should fetch proper dataset according these parameters.

and last not least, data can re-calculate state of pagination element.

another option:

if download complete dataset server (which seems case in example), should keep parameters required pagination (entriesperpage, currentpage, totalentries) in javascript code can keep track of pagination state , update pagination component such.

please aware downloading data 1 xhr request possible lead bottleneck in application. imagine dataset tens of thousands of records bandwidth, or worse: memory consumed javascript. that's why suggest option #1.