angular分页插件tm.pagination

最新推荐文章于 2025-06-13 14:08:47 发布

翻译最新推荐文章于 2025-06-13 14:08:47 发布 · 5.4k 阅读

文章标签：

#js调试 #css样式

css样式同时被 2 个专栏收录

11 篇文章

订阅专栏

js调试

10 篇文章

订阅专栏

本文介绍了一个基于 Angular 的分页插件实现方法，详细解释了如何安装和配置该插件，以及如何通过 Angular 指令的方式将其集成到项目中。文章还探讨了解决分页插件触发二次请求的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

 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的无高度宽度的值