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

Question

using a datatable (bootstrap )
i am displaying the result of ajax in part of datatable . the result ged addded to datable but
pagination not working on new result as the page loads only once.Who the pagination will work on new displayed result.
Thanks 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>'+'Edit</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>Edit</td></tr><tr class="odd gradeX"><td>2</td><td>Usa</td><td>2016-09-13 11:33:30</td><td>Edit</td></tr><tr class="odd gradeX"><td>3</td><td>Russia</td><td>2016-09-13 11:33:30</td><td>Edit</td></tr><tr class="odd gradeX"><td>4</td><td>R1</td><td>2016-09-13 11:33:42</td><td>Edit</td></tr><tr class="odd gradeX"><td>5</td><td>R5</td><td>2016-09-13 11:34:30</td><td>Edit</td></tr><tr class="odd gradeX"><td>6</td><td>R6</td><td>2016-09-13 11:34:40</td><td>Edit</td></tr><tr class="odd gradeX"><td>7</td><td>R7</td><td>2016-09-13 11:34:48</td><td>Edit</td></tr><tr class="odd gradeX"><td>8</td><td>R8</td><td>2016-09-13 11:34:54</td><td>Edit</td></tr><tr class="odd gradeX"><td>9</td><td>R9</td><td>2016-09-13 11:35:00</td><td>Edit</td></tr><tr class="odd gradeX"><td>10</td><td>R10</td><td>2016-09-13 11:35:07</td><td>Edit</td></tr><tr class="odd gradeX"><td>11</td><td>R11</td><td>2016-09-13 11:35:13</td><td>Edit</td></tr><tr class="odd gradeX"><td>12</td><td>R12</td><td>2016-09-13 11:35:25</td><td>Edit</td></tr><tr class="odd gradeX"><td>13</td><td>R67</td><td>2016-09-13 11:37:30</td><td>Edit</td></tr></tbody>

Answer 1

In order to have pagination updated on XHR requests, you need to have the information about the pagination as well. That is:
Current page number
Total amount of entries
The amount of entries to show per page
This information should be returned with your XHR request. You could for example add these properties to your result object (result.currentPage, result.totalPages, result.totalEntries).
Now with each concurrent request you should send these parameters to the server, and the server should fetch the proper dataset according to these parameters.
And last but not least, with this data you can re-calculate the state of your pagination element.
Another option:
If you download the complete dataset from the server (which seems to be the case in your example), you should keep the parameters required for pagination (entriesPerPage, currentPage, totalEntries) in your JavaScript code so you can keep track of your pagination state with that and update your pagination component as such.
Please be aware that downloading all data with one XHR request could possible lead a bottleneck in your application. Imagine with a dataset with tens of thousands of records will do with your bandwidth, or even worse: with the memory consumed by JavaScript. That's why I would suggest option #1.