分页器——angular

js部分

/**
 * Created by xueda_lina on 2018/7/18.
 */
(function () {
    'use strict';
    angular.module('idui1')
        // body事件
        .directive('body', ['$rootScope', function ($rootScope) {
            return {
                restrict: 'E',
                link: function (scope, element, attrs) {
                    // window被点击
                    angular.element(window).on("click", function (event) {
                        scope.$apply(function () {
                            $rootScope.$broadcast('windowClicked');
                        });
                    });
                }
            }
        }])
        //分页模板
        .directive('pageDiv', [function () {
            return {
                restrict: 'AE',
                replace: true,
                templateUrl: "views/global/pageDiv.html",
                scope: {
                    page: "=",
                    pageNum: "="
                },
                link: function (scope, element, attrs) {
                    var pageNum = scope.pageNum;
                    var startPage = 1;
                    var pageArr = [], allPages;
                    scope.$watch(function () {
                        if (scope.page) {
                            return scope.page.pageTotal;
                        }
                        return null;
                    }, function (pages) {
                        if (pages) {
                            allPages = pages;
                            if (allPages > pageNum) {
                                pageArr = range(pageNum);
                            } else {
                                pageArr = range(allPages);
                            }
                            scope.pageArr = pageArr;
                            scope.currPage = 1;
                            scope.JumpToPage = scope.currPage;
                        }
                    });

                    // 当前页码
                    scope.clickNumData = function (curNum, evt) {
                        if (evt) {
                          evt.preventDefault();
                        }
                        //如果是按键事件，不是按下的回车就返回
                        if((evt.keyCode && evt.keyCode != 13) || !curNum) return;
                        scope.currPage = curNum;
                        if (pageArr.length < pageNum) {
                            // 根据curNum取数据

                        } else {
                            startPage = curNum - 5;
                            if (startPage < 1) {
                                startPage = 1;
                            }
                            if (startPage + 9 > allPages) {
                                startPage = allPages - 9;
                            }
                            if (startPage != pageArr[0]) {
                                pageArr = [];
                                for (var i = 0; i < pageNum; i++) {
                                    pageArr[i] = startPage + i;
                                }
                                scope.pageArr = pageArr;
                            }
                        }
                        scope.page.pageNumber = curNum;
                        scope.JumpToPage = scope.page.pageNumber;
                    };

                    //上一页
                    scope.prevPage = function () {
                        if (scope.currPage == 1) {
                            return;
                        }
                        scope.currPage--;
                        scope.clickNumData(scope.currPage, event);
                    };
                    //下一页
                    scope.nextPage = function () {
                        if (scope.currPage == allPages) {
                            return;
                        }
                        scope.currPage++;
                        scope.clickNumData(scope.currPage, event);
                    };

                    /**
                     * 创建空数组使ng-repeat可以循环数字
                     * @param length
                     * @returns {Array}
                     */
                    function range(length) {
                        var numLength = parseInt(length);
                        var lengthArr = new Array(numLength);
                        for (var i = 0; i < lengthArr.length; i++) {
                            lengthArr[i] = i + 1;
                        }
                        return lengthArr;
                    }
                }

            }
        }]);
})();

分页器html

<div class="page-module">
    <ul>
        <li class="page-pre" ng-hide="page.pageNumber == 1">
            <span class="pre-page-arrow" ng-click="prevPage()">上一页</span>
        </li>
        <li ng-repeat="onePage in pageArr" class="page-number">
            <span ng-hide="onePage == page.pageNumber" ng-click="clickNumData(onePage, $event)">{{onePage}}</span>
            <span ng-show="onePage == page.pageNumber" class="active">{{onePage}}</span>
            <!-- <span ng-show="onePage == page.pageNumber" class="active">{{onePage}}</span> -->
            
        </li>
        <li class="page-next" ng-hide="currPage == page.pageTotal">
            <span class="next-page-arrow" ng-click="nextPage()">下一页</span>
        </li>
        <li>
            <div class="pull-left m-r-10 m-l-10" style="line-height: 36px;">跳转到</div>
            <input type="number" class="active text-center-i pull-left m-r-5" min="1" max="page.pageTotal" ng-model="JumpToPage" ng-keyup="clickNumData(JumpToPage, $event)" title="输入有效页码后按下回车直接跳转">
            <div class="pull-left m-r-10" style="line-height: 36px">页</div>
        </li>
        <li class="page-next"  ng-hide="currPage == page.pageTotal">
            <span class="next-page-arrow" style="width: 45px;" ng-click="clickNumData(JumpToPage, $event)">确定</span>
        </li>
    </ul>
</div>

页面引用

<div ng-if="pageing.pageTotal>1" page-div="" page="pageing" page-num="6"></div>