1.引入分页js,css插件
1)在js中引入
<!-- 分页组件开始 -->
<!--css-->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!--js-->
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分页组件结束 -->
2)在模块中引入插件
//控制器模块儿
var app = angular.module('pyg', [ 'pagination' ]);
2、引入AnglarJS分页控件
1)在在控制器下引入分页插件控制器
//1)在在控制器下引入分页插件控制器
//分页控件配置
$scope.paginationConf = {
currentPage : 1,
totalItems : 10,
itemsPerPage : 10,
perPageOptions : [ 10, 20, 30, 40, 50 ],
onChange : function() {
$scope.reloadList();//重新加载
}
};
2)在页面body中引入分页插件视图
<!--2)在页面body中引入分页插件视图-->
<!-- 分页视图 -->
<!-- conf="paginationConf" :视图引用控制器方法配置-->
<tm-pagination conf="paginationConf"></tm-pagination>
3、定义刷新方法,该方法会在数据发生变化时自动加载
//刷新页面
$scope.reloadList = function() {
$scope.findPage($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage)
};
4、定义分页查询方法
//分页查询
$scope.findPage = function(page, rows) {
var url = "/brand/findPage?page=" + page
+ "&rows=" + rows;
$http.post(url).success(function(data) {
$scope.entitys = data.rows;
$scope.paginationConf.totalItems = data.total;
})
};