Menu
i have a get api with serverside pagination,
http://demo.example.com?offset=0&limit=10
How do i implement in Datatables. I tried below but without success
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'>Next Page</a>';
}
return json;
}
}
} );
696
Finally got some time to implement a sample for server side pagination.
Below is the complete example for it. Note the input that we are giving to API call. you can take a look at this ajax: function ( data, callback, settings ) which is the main key and from where we are getting proper pagenumber and pagesize.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Jquery Datatable Example</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function () {
var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
var table = $('#example').DataTable({
dom: "Bfrtip",
paging: true,
pageLength: 5,
ajax: function ( data, callback, settings ) {
$.ajax({
url: 'http://localhost:64506/api/values',
// dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: {
RecordsStart: data.start,
PageSize: data.length
},
success: function( data, textStatus, jQxhr ){
callback({
// draw: data.draw,
data: data.Data,
recordsTotal: data.TotalRecords,
recordsFiltered: data.RecordsFiltered
});
},
error: function( jqXhr, textStatus, errorThrown ){
}
});
},
serverSide: true,
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
]
});
});
</script>
</body>
</html>
In the above example, we are integrating with an api which returns me a JSON of below format.
In the below format note the properties "TotalRecords", "RecordsFiltered". These are needed for datatable to recalculate pagination stuff and display proper number of pages.
{
"Data":[
{
"first_name":"FirstName 5",
"last_name":"LastName 5",
"position":null,
"office":"start date 5",
"start_date":"office 5",
"salary":50
},
{
"first_name":"FirstName 6",
"last_name":"LastName 6",
"position":null,
"office":"start date 6",
"start_date":"office 6",
"salary":60
},
{
"first_name":"FirstName 7",
"last_name":"LastName 7",
"position":null,
"office":"start date 7",
"start_date":"office 7",
"salary":70
},
{
"first_name":"FirstName 8",
"last_name":"LastName 8",
"position":null,
"office":"start date 8",
"start_date":"office 8",
"salary":80
},
{
"first_name":"FirstName 9",
"last_name":"LastName 9",
"position":null,
"office":"start date 9",
"start_date":"office 9",
"salary":90
}
],
"TotalRecords":100,
"RecordsFiltered":100
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
