web-dev-qa-db-ja.com

サーバー側でページネーションを実装する方法DatatablesでAPIを取得する

サーバーサイドのページネーションを備えたget apiがあります。

http://demo.example.com?offset=0&limit=10

データテーブルに実装するにはどうすればよいですか？以下を試しましたが、成功しませんでした

  $('#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;
    }
  }
} );
jquerydatatablejquery-pluginsdatatables
4
Pravin Singh

最後に、サーバーサイドのページネーションのサンプルを実装するための時間が得られました。

以下はその完全な例です。 API呼び出しに与えている入力に注意してください。あなたはこのajax: function ( data, callback, settings )を見ることができます。これはメインキーであり、適切なページ番号とページサイズを取得しています。

<!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>

上記の例では、以下の形式のJSONを返すAPIと統合しています。

以下の形式で、プロパティ「TotalRecords」、「RecordsFiltered」に注意してください。これらは、データテーブルが改ページ調整を再計算し、適切な数のページを表示するために必要です。

{
   "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
}
6
G_S