angular分页插件tm.pagination
1、angular-pagination
是基于angular 编写的可复用分页指令
安装
克隆项目到本地：
git clone https://github.com/febobo/angular-pagination.git
要跑demo环境要求：
node , bower , npm , gulp
安装： npm install && bower install
运行： gulp serve
demo用法
html
1 <body ng-app="demo" ng-controller="demoCtro" class="row text-center"> 2 <div ui-pagination conf="conf"></div> 3 </body>
JS
1 var app = angular.module('demo' , ['pagination']); 2 3 app.controller('demoCtro' , function($scope){ 4 5 $scope.title = 'pagination-directive'; 6 7 $scope.conf = { 8 9 // 总条数 10 total : 1190, 11 12 // 当前页 13 currentPage : 1, 14 15 // 一页展示多少条 16 itemPageLimit : 1, 17 18 // 是否显示一页选择多少条 19 isSelectPage : false, 20 21 // 是否显示快速跳转 22 isLinkPage : false 23 } 24 25 // 监控你的页码 ， 发生改变既请求 26 $scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){ 27 // 把你的http请求放到这里 28 console.log($scope.conf.currentPage , $scope.conf.itemPageLimit) 29 }) 30 })
完整基于Angularjs实现分页
前言
学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。
插件
在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件，觉还不错，读了下他的源码就直接在项目中使用了。
原理和使用说明
1、插件源码主要基于angular directive来实现。
2、调用时关键地方是后台请求处理函数，也就是从后台取数据。
3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。
4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。
5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。
效果图
调用代码
<div ng-app="DemoApp" ng-controller="DemoController">
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>FirstName</td>
<td>LastName</td>
<td>Status</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in persons">
<td>{{emp.ID}}</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
<td>{{emp.Status}}</td>
<td>{{emp.Address}}</td>
</tr>
</tbody>
</table>
<tm-pagination conf="paginationConf"></tm-pagination>
</div><script type="text/javascript">
var app = angular.module('DemoApp', ['tm.pagination']);
app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
var GetAllEmployee = function () {
var postData = {
pageIndex: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage
}
BusinessService.list(postData).success(function (response) {
$scope.paginationConf.totalItems = response.count;
$scope.persons = response.items;
});
}
//配置分页基本参数
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 5
};
/***************************************************************
当页码和页面记录数发生变化时监控后台查询
如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
***************************************************************/
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
}]);
//业务类
app.factory('BusinessService', ['$http', function ($http) {
var list = function (postData) {
return $http.post('/Employee/GetAllEmployee', postData);
}
return {
list: function (postData) {
return list(postData);
}
}
}]);
</script> |
插件和Demo下载
http://yunpan.cn/cQEhnLrpnkniQ 访问密码 be74
angular分页插件tm.pagination（解决触发二次请求的问题）
根据条件查询
需要重新定义一个方法
$scope.paginationConf = {
currentPage: $location.search().currentPage ? $location.search().currentPage : 1,
totalItems: 8000,
itemsPerPage: 15,
pagesLength: 15,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
console.log($scope.paginationConf.currentPage);
$location.search('currentPage', $scope.paginationConf.currentPage);
}
};
11.21 添加href属性，保存页码，并读取页码
最后整合的关键：在route.config.js路由里面相应的js上添加对应关系
否则调试的时候前端一直
<tm-pagination conf="alarmPaginationConf"></tm-pagination>
显示其为0*0的无高度宽度的值