Angularjs 分页控件

实现效果:

　　

实现步骤:

1.分页页面：page.html,页面多余样式，需要自己去除。

<div class="row" ng-show="conf.totalItems > 0">
    <div class="col-md-5 col-sm-12">
        <div class="dataTables_info" id="sample_1_info" role="status" aria-live="polite" ng-show="true">
            <!--Showing  to  of  entries-->
            <!--total {{ conf.numberOfPages }} page,total {{ conf.totalItems }}-->
            the<input type="text" class="form-control input-xsmall input-inline" ng-model="jumpPageNum"
                      ng-keyup="jumpToPage($event)"/>page,
            per page<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "
                            ng-change="changeItemsPerPage()" class="form-control input-xsmall input-inline"></select>
            /total<strong>{{ conf.totalItems }}</strong>item
 
            <!--A total of {{ conf.numberOfPages }} pages article {{ conf.totalItems }}-->
        </div>
    </div>
    <div class="col-md-7 col-sm-12">
        <div class="dataTables_paginate paging_bootstrap_full_number" id="sample_1_paginate">
            <ul class="pagination" style="visibility: visible;">
                <li ng-click="firstPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="first"><i
                        class="fa fa-angle-double-left"></i></a>
                </li>
                <li ng-click="prevPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="prev"><i
                        class="fa fa-angle-left"></i></a></li>
                <li ng-repeat="item in pageList track by $index" ng-click="changeCurrentPage(item)"
                    ng-class="{active: item == conf.currentPage, separate: item == '...'}"><a href="javascript:">{{ item
                    }}</a>
                </li>
                <li ng-click="nextPage()" ng-class="{disabled:isEnd()}"><a href="javascript:" title="next"><i
                        class="fa fa-angle-right"></i></a></li>
                <li ng-click="lastPage()" ng-class="{disabled:isEnd()}"><a href="javascript:"
                                                                           title="{{ getText('last') }}"><i
                        class="fa fa-angle-double-right"></i></a></li>
            </ul>
        </div>
    </div>
</div>

2.分页控件：

angular.module('bet.paging', [])
    .constant('pageSizeArray', [, , , , ])
    .constant('pagingConstant', {
        CURRENTPAGE: ,
        ITEMSPERPAGE:
    })
    .directive('paging', paging);
 
function paging(pageSizeArray) {
    return {
        restrice: 'EA',
        templateUrl: '/utils/page.html',
        replace: true,
        scope: {
            conf: '='
        },
        link: function (scope, element, attrs) {
            scope.changeCurrentPage = function (item) {
                if (item == '...') {
                    return;
                } else {
                    scope.conf.currentPage = item;
                }
            };
 
            scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : ;
            if (scope.conf.pagesLength %  === ) {
                scope.conf.pagesLength = scope.conf.pagesLength - ;
            }
 
            // conf.erPageOptions
            if (!scope.conf.perPageOptions) {
                scope.conf.perPageOptions = pageSizeArray;
            }
 
            // pageList
            function getPagination() {
                // conf.currentPage
                scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : ;
                // conf.totalItems
                scope.conf.totalItems = parseInt(scope.conf.totalItems);
 
                // conf.itemsPerPage (default:15)
                if (scope.conf.rememberPerPage) {
                    if (!parseInt(localStorage[scope.conf.rememberPerPage])) {
                        localStorage[scope.conf.rememberPerPage] = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : ;
                    }
 
                    scope.conf.itemsPerPage = parseInt(localStorage[scope.conf.rememberPerPage]);
 
                } else {
                    scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : ;
                }
 
                // numberOfPages
                scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage);
 
                // judge currentPage > scope.numberOfPages
                if (scope.conf.currentPage < ) {
                    scope.conf.currentPage = ;
                }
 
                if (scope.conf.currentPage > scope.conf.numberOfPages) {
                    scope.conf.currentPage = scope.conf.numberOfPages;
                }
 
                // jumpPageNum
                scope.jumpPageNum = scope.conf.currentPage;
                var perPageOptionsLength = scope.conf.perPageOptions.length;
                // define state
                var perPageOptionsStatus;
                for (var i = ; i < perPageOptionsLength; i++) {
                    if (scope.conf.perPageOptions[i] == scope.conf.itemsPerPage) {
                        perPageOptionsStatus = true;
                    }
                }
                if (!perPageOptionsStatus) {
                    scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
                }
                scope.conf.perPageOptions.sort(function (a, b) {
                    return a - b
                });
 
                scope.pageList = [];
                if (scope.conf.numberOfPages <= scope.conf.pagesLength) {
                    for (i = ; i <= scope.conf.numberOfPages; i++) {
                        scope.pageList.push(i);
                    }
                } else {
                    var offset = (scope.conf.pagesLength - ) / ;
                    if (scope.conf.currentPage <= offset) {
                        for (i = ; i <= offset + ; i++) {
                            scope.pageList.push(i);
                        }
                        scope.pageList.push('...');
                        scope.pageList.push(scope.conf.numberOfPages);
                    } else if (scope.conf.currentPage > scope.conf.numberOfPages - offset) {
                        scope.pageList.push();
                        scope.pageList.push('...');
                        for (i = offset + ; i >= ; i--) {
                            scope.pageList.push(scope.conf.numberOfPages - i);
                        }
                        scope.pageList.push(scope.conf.numberOfPages);
                    } else {
                        scope.pageList.push();
                        scope.pageList.push('...');
 
                        for (i = Math.ceil(offset / ); i >= ; i--) {
                            scope.pageList.push(scope.conf.currentPage - i);
                        }
                        scope.pageList.push(scope.conf.currentPage);
                        for (i = ; i <= offset / ; i++) {
                            scope.pageList.push(scope.conf.currentPage + i);
                        }
 
                        scope.pageList.push('...');
                        scope.pageList.push(scope.conf.numberOfPages);
                    }
                }
 
                if (scope.conf.onChange) {
                    scope.conf.onChange();
                }
                scope.$parent.conf = scope.conf;
            }
 
            // firstPage
            scope.firstPage = function () {
                scope.conf.currentPage = ;
            };
 
            // prevPage
            scope.prevPage = function () {
                if (scope.conf.currentPage > ) {
                    scope.conf.currentPage -= ;
                }
            };
            // nextPage
            scope.nextPage = function () {
                if (scope.conf.currentPage < scope.conf.numberOfPages) {
                    scope.conf.currentPage += ;
                }
            };
 
            //lastPage
            scope.lastPage = function () {
                scope.conf.currentPage = scope.conf.numberOfPages;
            };
 
            //is first page
            scope.isFirst = function () {
                if (scope.conf.currentPage > ) {
                    return false;
                }
                return true;
            };
 
            //is end page
            scope.isEnd = function () {
                if (scope.conf.currentPage < scope.conf.numberOfPages) {
                    return false;
                }
                return true;
            };
 
            // 跳转页
            scope.jumpToPage = function () {
                scope.jumpPageNum = scope.jumpPageNum.replace(/[^-]/g, '');
                if (scope.jumpPageNum !== '') {
                    scope.conf.currentPage = scope.jumpPageNum;
                }
            };
 
            scope.changeItemsPerPage = function () {
                if (scope.conf.rememberPerPage) {
                    localStorage.removeItem(scope.conf.rememberPerPage);
                }
            };
 
            scope.$watch(function () {
                var newValue = scope.conf.currentPage + ' ' + scope.conf.totalItems + ' ';
                if (scope.conf.rememberPerPage) {
                    if (localStorage[scope.conf.rememberPerPage]) {
                        newValue += localStorage[scope.conf.rememberPerPage];
                    } else {
                        newValue += scope.conf.itemsPerPage;
                    }
                } else {
                    newValue += scope.conf.itemsPerPage;
                }
                return newValue;
 
            }, getPagination);
 
            //scope.getText = function (key) {
            //    return currentPage.text[key];
            //};
        }
    }
};

3.页面调用：

<paging conf="pagingConf"></paging>

//声明user模块并引入bet.paging子模块
angular.module('bet.user', ['bet.paging']);
 
angular
    .module('bet.user')
    .controller('userAppCtrl', userAppCtrl);
 
//依赖注入pagingConstant
userAppCtrl.$inject = ['$scope', 'pagingConstant'];
 
function userAppCtrl($scope, pagingConstant) {
　　
//paging config
$scope.pagingConf = {
    currentPage: pagingConstant.CURRENTPAGE,
    itemsPerPage: pagingConstant.ITEMSPERPAGE,
    totalItems:        　　
};
 
});