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
