1. 首页
  2. 服务端开发
  3. angular分页插件tm.pagination

angular分页插件tm.pagination

•服务端开发•阅读 3418

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

angular分页插件tm.pagination

 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   })

angular分页插件tm.pagination

完整基于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思想。

效果图

angular分页插件tm.pagination

调用代码

<div ng-app="DemoApp"ng-controller="DemoController">

<tableclass="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">

varapp = angular.module('DemoApp', ['tm.pagination']);

app.controller('DemoController', ['$scope','BusinessService',function($scope, BusinessService) {

varGetAllEmployee =function() {

varpostData = {

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) {

varlist =function(postData) {

return$http.post('/Employee/GetAllEmployee', postData);

}

return{

list:function(postData) {

returnlist(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属性，保存页码，并读取页码

angular分页插件tm.pagination

最后整合的关键：在route.config.js路由里面相应的js上添加对应关系

否则调试的时候前端一直

<tm-pagination conf="alarmPaginationConf"></tm-pagination>

显示其为0*0的无高度宽度的值

angular分页插件tm.pagination

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。