Pagination+AngularJS实现前端的分页 Pagination+AngularJS实现前端的分页

Pagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。

引入文件

本文介绍的是Pagination在AngularJS中的实现，所以需要引用AngularJS文件，以及Pagination的css和js文件。同时该分页插件还用到了jquery和bootstarp，所以也要依赖对这两个插件进行依赖，否则将无法显示样式。

    <!--jquery 和 bootstarp-->
    <script src="js/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--引入angularJS-->
    <script src="plugins/angularjs/angular.min.js"></script>
    <!--引入pagination-->
    <link href="plugins/angularjs/pagination.css">
    <script src="plugins/angularjs/pagination.js"></script>

创建模块和控制器

由于此文使用的是AngularJS+Pagination实现的分页，所以需要先创建AngularJS的模块，和控制器。如果不明白什么是模块、控制器可以参见AngularJS入门。

在创建模块的时候需要引入分页插件功能。

//创建模块
		var app = angular.module("myApp", ['pagination']);

由于分页查询需要查询后台，所以创建控制器时需要注意引入$http域。

//创建控制器
        app.controller("myController", function ($scope, $http) {
        });

创建分页配置对象

我们在实现分页的过程中要用到一些属性和方法所以，需要先在myController控制器中创建以一个分页配置对象，用于封装分页过程中用到的属性和方法。
其中onChange方法暂时缺省，下一步创建分页查询方法时，再补充。

//创建分页配置对象
            $scope.paginationConf = {
                //当前页码
                currentPage : 1,
                //总页数
                totalItems : 10,
                //每页显示数量
                itemsPerPage : 10,
                //每页显示条目数
                perPageOptions : [5,10,20,50],
                //改变页码时执行方法
                onChange : function () {
                   
                }
            }

创建分页查询方法

这一步的作用就是调用后台接口，查询出分页后的数据。直接在myController这个控制器中创建一个findPage(pageNo,pageSize)方法，其中要传入两个参数，pageNo，pageSize，这两个参数分别是需要查询的页码，每页数据的条目数。
查询成功后会返回一个PageResult对象,这个对象中有两个属性,total和rows,分别存放了总条目数和当前页的数据,我们拿到这两个属性后赋值给相关成员变量即可。

//分页查询
            $scope.findPage = function (pageNo, pageSize) {
                //向后台查询数据
                $http.get("../brand/findPage?pageNo=" + pageNo + "&pageSize=" + pageSize).success(function (response) {
                    //讲查到的数据放入list
                    $scope.list = response.rows;
                    //获取最大数量
                    $scope.paginationConf.totalItems = response.total;
                })
            }

在页面中引入分页插件

首先需要在body中引入ng-app和ng-controller。
然后在页面中展示分页后的数据。
对于页码工具栏。直接在需要显示分页工具栏（上一页

下一页、当前页码等。）的位置加入<tm-pagination conf="paginationConf"></tm-pagination>即可。

下面附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--jquery 和 bootstarp-->
    <script src="js/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--引入angularJS-->
    <script src="plugins/angularjs/angular.min.js"></script>
    <!--引入pagination-->
    <link href="plugins/angularjs/pagination.css">
    <script src="plugins/angularjs/pagination.js"></script>
    <script>
        //创建模块
        var app = angular.module("myApp", ['pagination']);
        //创建控制器
        app.controller("myController", function ($scope, $http) {

            //创建分页配置对象
            $scope.paginationConf = {
                //当前页码
                currentPage : 1,
                //总页数
                totalItems : 10,
                //每页显示数量
                itemsPerPage : 10,
                //每页显示条目数
                perPageOptions : [5,10,20,50],
                //改变页码时执行方法
                onChange : function () {
                    $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
                }
            }

            //分页查询
            $scope.findPage = function (pageNo, pageSize) {
                //向后台查询数据
                $http.get("../brand/findPage?pageNo=" + pageNo + "&pageSize=" + pageSize).success(function (response) {
                    //讲查到的数据放入list
                    $scope.list = response.rows;
                    //获取最大数量
                    $scope.paginationConf.totalItems = response.total;
                })
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <td>编号</td>
            <td>品牌名称</td>
            <td>首字母</td>
        </tr>
        <tr ng-repeat="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.firstChar}}</td>
        </tr>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</body>
</html>

本文中用到的js文件和css文件已上传到百度网盘。链接提取码：ei90