How to implement pagination with serverside get api in Datatables

前端未结

关注

 1  1452

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

相关标签:

1条回答

-上瘾入骨i

2020-12-16 09:00

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
}

0 讨论(0)