Datatables插件1.10.15版本服務器處理模式ajax獲取分頁數據實例解析

時間 2019-11-07

標籤 datatables 插件 1.10.15 版本服務器處理模式 ajax 獲取分頁數據實例解析欄目 Ajax 简体版

原文原文鏈接

1、問題描述

前端須要使用表格來展現數據，找了一些插件，最後肯定使用dataTables組件來作。javascript

後端的分頁接口已經寫好了，不能修改。接口須要傳入頁碼(pageNumber)和頁面顯示數據條數(pageSize)，顯示相應的數據。css

2、分析

先來分析下分頁實現。html

一是後端分頁：這種狀況，請求的數據，後端返回的數據格式都按着官網來編碼，很容易實現，在官網上有示例，很少說明。
二是前端分頁：前端分頁也是支持的，不過須要一次把全部數據都獲取到才能夠。前端

看到這裏，問題來了。因爲後端在目前的狀況下是更改不了，只能在前端實現。可是，如今又不知足前端分頁的條件：java

一次性獲取全部數據（如今後端數據接口只能返回相應頁碼的數據）。jquery

介於目前的狀況，獲取的數據只有一頁，沒有全部的頁碼。
試試能不能假裝一下後端分頁的狀況，就是開啓後端分頁，在請求以前，將傳入的數據進行重組，在獲取到數據後，將返回的數據按照後端分頁的數據格式組裝一遍。ajax

通過測試，是能夠的。json

3、實現

經過DataTables配置參數ajax項實現的
目前最新DataTables的版本是1.10.15版本，如下是使用此版本。bootstrap

關於ajax詳細介紹請看官方說明：中文 | 英文後端

DataTables參數ajax接收三種類型的參數：

*string：設置獲取數據的url

*object：和 jQuery.ajax 定義相似

*function：自定義獲取數據的功能

直接上代碼吧，都有註釋。

前端頁面代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>jquery DataTables插件自定義分頁ajax實現</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
</head>
 
<body>
  <div class="row-fluid">
    <h3>JQuery DataTables插件自定義分頁Ajax實現</h3>
    <table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>編號</th>
          <th>姓名</th>
          <th>性別</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <!-- DataTables -->
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript">
  $(function() {
    //提示信息
    var lang = {
      "lengthMenu": "每頁 _MENU_  項",
      "processing": "處理中...",
      "zeroRecords": "沒有匹配結果",
      "info": "當前顯示第 _START_ 到 _END_ 項, 共 _TOTAL_ 項",
      "infoEmpty": "暫無數據",
      "infoFiltered": "(由 _MAX_ 項結果過濾)", //當使用搜索功能後，表格主要信息出追加的字符
      "loadingRecords": "加載中...",
      "processing": "處理中...",
      "search": "搜索:",
      "infoPostFix": "", //追加到全部其餘主要信息字符串以後
      "url": "",
      "emptyTable": "表中數據爲空",
      "infoThousands": ",",
      "paginate": {
        "first": "首頁",
        "last": "末頁",
        "next": "下頁",
        "previous": "上頁"
      }
    };
 
 
    //初始化表格
    var table = $("#example").DataTable({
      language: lang, //提示信息
      stateSave: true, //狀態保存，再次加載頁面時還原表格狀態
      autoWidth: false, //禁用自動調整列寬
      stripeClasses: ["odd", "even"], //爲奇偶行加上樣式，兼容不支持CSS僞類的場合
      processing: true, //隱藏加載提示,自行處理
      serverSide: true, //啓用服務器端分頁
      searching: false, //禁用原生搜索
      orderMulti: false, //啓用多列排序
      order: [], //取消默認排序查詢,不然複選框一列會出現小箭頭
      deferRender: true, //延遲渲染能夠提升Datatables的加載速度
      lengthMenu: [
        [10, 25, 50, 100, 300, -1],
        [10, 25, 50, 100, 300, "全部"]
      ], //每頁多少項，第一個數組是表示的值，第二個數組用來顯示
      renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui
      pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers
      scrollY: 300, //表格的固定高
      scrollCollapse: true, //開啓滾動條
      pageLength: 10, //首次加載的數據條數
      columnDefs: [{
       targets: 'nosort', //列的樣式名
       orderable: false //包含上樣式名‘nosort'的禁止排序
      }],
      //對應列表表頭字段
      columns: [{
        "data": "Id"
      }, {
        "data": "Name"
      }, {
        "data": "Sex"
      }],
      ajax: function(data, callback, settings) {
        //封裝請求參數
        var param = {};
        param.limit = data.length; //頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
        param.start = data.start; //開始的記錄序號
        param.page = (data.start / data.length) + 1; //當前頁碼
        //console.log(param);
        //ajax請求數據
        $.ajax({
          url: "/hello/list",
          type: "POST",
          cache: false, //禁用緩存
          data: param, //傳入組裝的參數
          dataType: "json",
          contentType: 'application/json;charset=utf-8',
          beforeSend: function(request) {
            request.setRequestHeader("token", localStorage.token);
          },
          success: function(result) {
            //console.log(result);
            //setTimeout僅爲測試延遲效果
            setTimeout(function() {
              //封裝返回數據
              var returnData = {};
              returnData.draw = data.draw; //這裏直接自行返回了draw計數器,應該由後臺返回
              returnData.recordsTotal = result.total; //返回數據所有記錄
              returnData.recordsFiltered = result.total; //後臺不實現過濾功能，每次查詢均視做所有結果
              returnData.data = result.data; //返回的數據列表
              //console.log(returnData);
              //調用DataTables提供的callback方法，表明數據已封裝完成並傳回DataTables進行渲染
              //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
              callback(returnData);
            }, 200);
          }
        });
      },
 
    });
 
  });
  </script>
</body>
 
</html>