上篇文章“从0开始做一个分页控件”，里面讲了做一个分页控件最基本的内容。本篇在之前的基础上进行完善，实现一个比较完善的分页控件。
首先，说一下本篇要做的改造：
第一， 实现动态的数据，至于服务端使用的技术和语言就无所谓了；
第二， 增加“数字页码”的功能，并且动态调整其页码
一从服务器端获取数据
首先我们定义一个变量，存储服务端获取数据的url
var searchUrl = "/Book/GetBook”;
然后我们通过AngularJS的$http来获取服务端的数据。这里讲一下$http的参数传递。
AngularJS可以支持GET请求和POST请求，其API如下：
对于GET请求：
$http.get(url).success(function(d){});
如果有参数，通过拼接在url中来传递。
对于POST请求：
$http.post(url,para).success(function(d){});
如果有参数，通过para变量来传递。
从服务前端返回的数据，一般为json或者json数组的格式。
这与我们上一篇中定义的books数组格式是一样的。
var testAPP = angular.module('couponapp', []);
var books = [];
var searchUrl = “/Book/GetBook”;
testAPP.controller('ctrlController', function ($scope, $http) {
$http.get(searchUrl).success(function (p) {
books = p;//这里加入第一页，上一页，下一页，最后一页，以及数字页码的处理逻辑
}).error(function (error) {
$scope.status = "error" + error.message;
console.log("status=" + $scope.status);
});
});
这样，就从服务器端获取到数据了。
二设置数字页码分页
首先是html中，增加数字页码，使用ng-repeat来绑定中间的数字页码。
<ul class="pagination">
<li><a>共<font color="red">{{totalcount}}</font>条</a></li>
<li><a ng-click="firstpage()" style="cursor: pointer">首页</a></li>
<li><a ng-click="prepage()" style="cursor: pointer">上页</a></li>
<li><a ng-click="gopage()" style="cursor: pointer" p="{{p}}" ng-repeat="p in pages">{{p}}</a></li>
<li><a ng-click="nextpage()" style="cursor: pointer">下页</a></li>
<li><a ng-click="lastpage()" style="cursor: pointer">尾页</a></li>
<li><a>第<font color="red">{{pageindex}}</font>页</a></li>
<li><a>共{{pagecount}}页</a></li>
</ul>
从pages循环出其中的项，来绑定到li上。下面pages就是我们要关注的重点了。
首先我们定义几个变量：
var pagesize = 5;//用于表示每页显示的条目数 var pages = [];//用于保存分页控件中间部分“数字页码”的数字。
在从服务端获取到json数据后，我们将其赋值给数组变量books。
2.1设置分页基本属性
接下来我们给$scope变量的一些属性进行赋值
$scope.totalcount = books.length; //区域1，总记录数
$scope.pageindex = 1; //设置当前的页码
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
$scope.pagecount = Math.ceil(books.length / pagesize);//进一法
if (books.count % pagesize > 0) {
$scope.pagecount = $scope.pagecount + 1; //计算总共多少页
}
2.2计算pages数组变量
接下来，我们计算pages
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {//小于等于5页，按照实际的页码显示
for (var i = 1; i <= $scope.pagecount; i++) {
pages.push(i);
}
}
else {//pagecount>5，大于5页，只显示5页
for (var i = 1; i <= 5; i++) {
pages.push(i);
}
}
$scope.pages = pages;
这里我们设定，最多显示5个页码，当页码不足5页时，显示实际应该的页码数。
2.3计算第一页方法
$scope.firstpage = function () {
$scope.pageindex = 1;//设置当前页码为第一页
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
pages = [];
for (var i = 1; i <= 5; i++) {//数字页码显示1,2,3,4,5
pages.push(i);
}
}
$scope.pages = pages;
}
2.4计算上一页方法
$scope.prepage = function () {
console.log("pre.pages[0]=" + pages[0]);
if (pages[0] > 1) {//当前数字页码的最小值不是1，
$scope.pageindex = $scope.pageindex - 1;
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
var npages = pages;
pages = [];
for (var i = 0; i < npages.length; i++) {
pages.push(npages[i] - 1);//数字页码整体“减一”，例如原来是2,3,4,5,6，会变为1,2,3,4,5
}
npages = [];
}
}
else {//当前页码是从第一页开始的。
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
console.log("pagecount>5");
pages = [];
for (var i = 1; i <= $scope.pagecount; i++) {
pages.push(i);
}
if ($scope.pageindex == 1) {//如果当前是第一页，这页码还是第一页
$scope.pageindex = 1;
}
else {
$scope.pageindex = $scope.pageindex - 1;//当前显示的是1,2,3,4，5但是当前页并不是第一页，则当前页页码减一
}
}
else {//pagecount>5
console.log("pagecount>5");
pages = [];
for (var i = 1; i <= 5; i++) {
pages.push(i);
}
if ($scope.pageindex == 1) {
$scope.pageindex = 1;
}
else {
$scope.pageindex = $scope.pageindex - 1;
}
}
}
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
console.log($scope.books);
$scope.pages = pages;
}
2.5计算下一页方法
$scope.nextpage = function () {
if (pages[pages.length - 1] < $scope.pagecount) {//当前页码最大值，不是最后一页
$scope.pageindex = $scope.pageindex + 1;
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
var npages = pages;
pages = [];
for (var i = 0; i < npages.length; i++) {
pages.push(parseInt(npages[i], 10) + 1);//每个页码加一，例如最大页码为10，当前页码是4,5,6,7,8，则变为5,6,7,8,9
}
npages = [];
}
}
else {
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
pages = [];
for (var i = $scope.pagecount - 4; i <= $scope.pagecount; i++) {//显示最大的5页
pages.push(i);
}
}
if ($scope.pageindex == $scope.pagecount) {
$scope.pageindex = $scope.pagecount;
}
else {
$scope.pageindex = $scope.pageindex + 1;//当前页码加1
}
}
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
$scope.pages = pages;
}
2.6计算最后一页方法
$scope.lastpage = function () {
$scope.pageindex = $scope.pagecount;
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
pages = [];
for (var i = $scope.pagecount - 5; i <= $scope.pagecount; i++) {//显示最大的5页
pages.push(i);
}
}
$scope.pages = pages;
}
2.7计算数字页码的方法
$scope.gopage = function () {
var p = $(this).attr("p");//使用Jquery获取当前点击的数字页码，如点击的页码为3，即表示要跳转到第3页。
$scope.pageindex = p;
$scope.books = books.slice(($scope.pageindex - 1) * pagesize, $scope.pageindex * pagesize);
if ($scope.pagecount == 0) {
}
else if ($scope.pagecount <= 5) {
}
else {//pagecount>5
if (p < 3) {//跳转到1或2页
pages = [];
for (var i = 1; i <= 5; i++) {//显示1,2,3,4,5
pages.push(i);
}
}
else if (p > $scope.pagecount - 2) {//跳转到最后2页
pages = [];
for (var i = $scope.pagecount - 4; i <= $scope.pagecount; i++) {//显示最后5页
pages.push(i);
}
}
else {
pages = [];
for (var i = p - 2; i <= p + 2; i++) {//在5个页码页中，中间的也就是第三个，显示当前的点击的页码，然后左边显示2个小的，右边显示2个大的
pages.push(i);//例如，一共有10页，如多点击的是6，则会显示4,5,6,7,8。
}
}
}
$scope.pages = pages;
}
至此，我们就完成了全部的分页功能。
下面我们来看一下最终的效果：
这里需要注意一个问题，我们这里是从服务端获取了全部的数据，然后使用js对数据进行分页的，在实际使用的时候，会将当前页，每页显示多少条等信息发送给服务端，由服务端完成分页的数据提取后，再返回给客户端。这样可以减少服务端和客户端传输的数据量。