自定义angularjs分页控件

继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页控件。

思路是自定义一个directive , 然后用isolated scope与父级controller $scope同步交互页数和当前页信息， 利用module的contant方法定义默认选项，从directive link 函数获取用户自定义选项设置。和以前写jquery插件的思路类似, 内部定义一个默认的defaults选项，利用jQuery.extend({},defaults,userCustomOption)合并用户自定义设置 ,然后动态构造html结构，只不过directive可以使用模板，模板中可以继续使用其他directive，所以构造html的工作可以分配给模板来做，劳累了半天总算可以跑起来了，劳动成果如下 angular.pagination.js

;
(function(angular) {
    var myModule = angular.module("myModule", []);

    myModule.constant('pagexConfig', {
        visiblePageCount: 10,
        firstText: 'First',
        lastText: 'Last',
        prevText: 'Previous',
        nextText: 'Next'
    }).directive("pager", ['pagexConfig', function(pagexConfig) {
        return {
            link: function(scope, element, attrs) {
                var visiblePageCount = angular.isDefined(attrs.visiblePageCount) ? attrs.visiblePageCount : pagexConfig.visiblePageCount;
                scope.firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : pagexConfig.firstText;
                scope.lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : pagexConfig.lastText;
                scope.prevText = angular.isDefined(attrs.prevText) ? attrs.prevText : pagexConfig.prevText;
                scope.nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : pagexConfig.nextText;
                scope.currentPage = 1;

                scope.pageChange = function(page) {
                    if (page >= 1 && page <= scope.pageCount) {
                        scope.currentPage = page;
                    } else {
                        scope.currentPage = 1;
                    }
                }

                function build() {
                    var low,
                        high,
                        v;

                    scope.pagenums = [];

                    if (scope.pageCount == 0) {
                        return;
                    }
                    if (scope.currentPage > scope.pageCount) {
                        scope.currentPage = 1;
                    }

                    if (scope.pageCount <= visiblePageCount) {
                        low = 1;
                        high = scope.pageCount;
                    } else {
                        v = Math.ceil(visiblePageCount / 2);
                        low = Math.max(scope.currentPage - v, 1);
                        high = Math.min(low + visiblePageCount - 1, scope.pageCount);

                        if (scope.pageCount - high < v) {
                            low = high - visiblePageCount + 1;
                        }
                    }

                    for (; low <= high; low++) {
                        scope.pagenums.push(low);
                    }

                    scope.onPageChange();
                }

                scope.$watch('currentPage+pageCount', function() {
                    build();
                });
            },
            replace: true,
            restrict: "E",
            scope: {
                pageCount: '=',
                currentPage: '=',
                onPageChange: '&'
            },
            template: '<ul class="pagination"><li ng-click="pageChange(1)">{{firstText}}</li>' +
                '<li ng-click="pageChange(currentPage-1>0?currentPage-1:1)">{{prevText}}</li>' +
                '<li ng-repeat="pagenum in pagenums" ng-click="pageChange(pagenum)" ng-class="{active:currentPage===pagenum}">{{pagenum}}</li>' +
                '<li ng-click="pageChange(currentPage+1<=pageCount?currentPage+1:pageCount)">{{nextText}}</li>' +
                '<li ng-click="pageChange(pageCount)">{{lastText}}</li></ul>'
        }
    }]);
})(angular)

简单起见， 只定义了几个简单的自定义属性， first | last | prev | next (Text) 顾名思义就是首页，尾页，上一页，下一页, visiblePageCount是用户可见的页码块。

server 端代码继续用昨天knockoutjs 的 ,获取页数的稍作改变

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace WebApp.Api
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }

    public class TestController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 4, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 5, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 6, Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
            new Product { Id = 7, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 8, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 9, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 10, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 11, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 12, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 13, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 14, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 15, Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
            new Product { Id = 16, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 17, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 18, Name = "Hammer", Category = "Hardware", Price = 16.99M }
        };

        [Route("api/getpagecount")]
        [HttpGet]
        public int GetCount()
        {
            return products.Length % 10 == 0 ? products.Length / 10 : products.Length / 10 + 1;
        }

        [Route("api/getdata")]
        [HttpGet]
        public IEnumerable<Product> GetProduct(int pageIndex, int pageSize)
        {
            return products.Skip(pageIndex * pageSize).Take(pageSize);
        }
    }
}

view层页码代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
    <link href="css/style.css" rel="stylesheet" />
</head>

<body ng-app="app">
    <div ng-controller="myCtrl">
        <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" last-text="最后一页"></pager>
    </div>
    <script src="js/angular-1.2.21.min.js"></script>
    <script src="js/angular.pagination.js"></script>
    <script src="js/app.js"></script>
</body>

</html>

业务逻辑代码

 var app = angular.module( 'app', ['myModule'] );

        app.controller( 'myCtrl', function ( $scope, $http )
        {
            $scope.onPageChange = function ()
            {
                $http.get( '/api/getdata?pageIndex=' + ( $scope.currentPage - 1 ) + '&pageSize=10' ).success( function ( data )
                {
                    $scope.items = data;
                } );
            }

            $http.get( '/api/getpagecount' ).success( function ( data )
            {
                $scope.pageCount = data;
            } );

            $http.get( '/api/getdata?pageIndex=0&pageSize=10' ).success( function ( data )
            {
                $scope.items = data;
            } );
        } );

运行效果图

 纯html版本的已经 发布到github , 无须server端支持 https://github.com/leonwgc/angularjs-pagination