从1开始做一个分页控件

上篇文章“从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对数据进行分页的，在实际使用的时候，会将当前页，每页显示多少条等信息发送给服务端，由服务端完成分页的数据提取后，再返回给客户端。这样可以减少服务端和客户端传输的数据量。