AngularJS中實現服務端分頁

時間 2019-11-08

標籤 angularjs 實現服務分頁欄目 AngularJS 简体版

原文原文鏈接

這個教程將介紹在AngularJS應用中的服務端分頁處理。在任何涉及到列表或表格數據的應用中均可能會用到分頁。css

概念html

當咱們處理異步分頁時，每次只從服務器上獲取一頁數據。也就是說當用戶點擊第二頁，就只讀取第二頁的數據。git

下載地址：angularjs

https://github.com/rahil471/Server-Side-Pagination-In-AngularJSgithub

概述ajax

在客戶端咱們將使用到 dir-paginate 組件。調用後臺API須要傳遞兩個參數 page number 和 items per page。舉個例子，每頁顯示10條記錄，在你查看第二頁時，那麼API須要返回的記錄是從第11條記錄開始的。除了返回數據項，API還須要返回總記錄數。總記錄數對於分頁相當重要。數據庫

分頁API解釋bootstrap

返回分頁數據的API須要兩個參數api

http://yourdomain/apiname/{itemsPerPage}/{pagenumber}

有這兩個參數 itemsPerPage 和 pagenumber 你就能夠對向數據庫發出恰當的請求了。例如，若是{itemsPerPage} 是 10 and {pagenumber} 是 3，API就會是下面的樣子。服務器

http://yourdomain/apiname/10/3

相應的MySQL查詢語句就是這樣的

SELECT * FROM 'table_name' LIMIT ({pagenumber}-1)*{itemsPerPage},{itemsPerPage}

實際上以下：

SELECT * FROM 'table_name' LIMIT 20,10

上面的語句會返回第21條到第30條的記錄（MySql的索引號是從0開始的）。

實現

首先咱們須要先得到建立HTML文件須要的組件，要實現分頁須要先下載 dirPagination.js 或是這個 dirPagination.js。

INDEX.HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Server Pagination in Angular js</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/dirPagination.js"></script>
        <script src="app/app.js"></script>
  </body>
</html>

咱們須要引用到 angular.js 和 dirPagination.js，app.js是咱們用來編寫JS代碼的文件。還須要引用一些CSS來實現扁平化UI。

如今讓咱們建立下Angular app

APP/APP.JS

var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($http){
    var vm = this;
    vm.users = []; //declare an empty array
    vm.pageno = 1; // initialize page no to 1
    vm.total_count = 0;
    vm.itemsPerPage = 10; //this could be a dynamic value from a drop down
    vm.getData = function(pageno){ // This would fetch the data on page change.
        //In practice this should be in a factory.
        vm.users = [];  
        $http.get("http://yourdomain/apiname/{itemsPerPage}/{pagenumber}").success(function(response){ 
            //ajax request to fetch data into vm.data
             vm.users = response.data;  // data to be displayed on current page.
             vm.total_count = response.total_count; // total data count.
        });
    };
    vm.getData(vm.pageno); // Call the function to fetch initial data on page load.
});

上面的示例咱們聲明瞭angularJS的應用（app）和控制器(controller),而且添加了angularUtils.directives.dirPagination做爲咱們應用的依賴項。控制器中採用.vm表明 view-model 做爲 this 的引用。首先咱們對一些重要的參數進行了初始化。

一、vm.users – 用來存儲頁面上數據的集合。
二、vm.pageno – 加載時設置當前頁爲1。
三、vm.total_count – 存儲總記錄數。結果又由API返回
四、vm.itemsPerPage – 每頁顯示記錄數 (可動態設置)
五、vm.getData() – 每次用戶點擊新頁時調用的方法. 初始加載第一頁。

如今咱們的控制器已經準備好了。下面我使用 dir-paginate 指令重複顯示數據（替代了angularjs的ng-repeat指令），將total_count賦給total-items指令。

dir-paginate將使用這個數值來生成分頁連接。

<tr dir-paginate=」user in data.users|itemsPerPage:data.itemsPerPage」 total-items=」data.total_count」>

下一步咱們將使用dir-pagination-controls指令添加分頁連接。

PAGINATION CONTROLS

   <dir-pagination-controls
        max-size="8"
        direction-links="true"
        boundary-links="true" 
        on-page-change="data.getData(newPageNumber)">
    </dir-pagination-controls>

on-page-change 指令這裏是關鍵，在每次頁改變的時候都會調用一個函數，用這個指令來調用vm.getdata(pageno)方法。這個方法會使用新的頁碼向服務器請求下一頁的數據。

不要忘記聲明你本身的 ng-app 和 ng-controller。看下完成標記。

INDEX.HTML

<!doctype html>
<html lang="en" ng-app="angularTable">
  <head>
    <meta charset="utf-8">
    <title>Server Side Pagination in Angular js</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <div role="main" class="container theme-showcase">
      <div class="" style="margin-top:90px;">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Server Side pagination in Angular js</h2>
            </div>
            <div class="bs-component" ng-controller="listdata as data">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Full Name</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-show="data.users.length <= 0"><td colspan="5" style="text-align:center;">Loading new data!!</td></tr>
                        <tr dir-paginate="user in data.users|itemsPerPage:data.itemsPerPage" total-items="data.total_count">
                            <td>{{user.index}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.surname}}</td>
                            <td>{{user.fullname}}</td>
                            <td>{{user.email}}</td>
                        </tr>
                    </tbody>
                </table> 
                <dir-pagination-controls
                   max-size="8"
                   direction-links="true"
                   boundary-links="true" 
                   on-page-change="data.getData(newPageNumber)" >
                </dir-pagination-controls>
            </div>
        </div>
      </div>
    </div>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/dirPagination.js"></script>
        <script src="app/app.js"></script>
  </body>
</html>