AngularJS中实现服务端分页

这个教程将介绍在AngularJS应用中的服务端分页处理。在任何涉及到列表或表格数据的应用中都可能会用到分页。概念当我们处理异步分页时，每次只从服务器上获取一页数据。也就是说当用户点击第二页，就只读取第二页的数据。下载地址：https://github.com/rahil471/Server-Side-Pagination-In-AngularJS概述在客户端我们将使...

elef

210人浏览 · 2017-03-24 17:08:00

elef · 2017-03-24 17:08:00 发布

这个教程将介绍在AngularJS应用中的服务端分页处理。在任何涉及到列表或表格数据的应用中都可能会用到分页。

概念

当我们处理异步分页时，每次只从服务器上获取一页数据。也就是说当用户点击第二页，就只读取第二页的数据。

下载地址：

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

概述

在客户端我们将使用到 dir-paginate 组件。调用后台API需要传递两个参数 page number 和 items per page。举个例子，每页显示10条记录，在你查看第二页时，那么API需要返回的记录是从第11条记录开始的。除了返回数据项，API还需要返回总记录数。总记录数对于分页至关重要。

分页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 的引用。首先我们对一些重要的参数进行了初始化。

1、vm.users – 用来存储页面上数据的集合。
2、vm.pageno – 加载时设置当前页为1。
3、vm.total_count – 存储总记录数。结果又由API返回
4、vm.itemsPerPage – 每页显示记录数 (可动态设置)
5、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>