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 1 to 5 of 25 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>

View Code

2.分页控件：

angular.module('bet.paging', [])
    .constant('pageSizeArray', [10, 15, 20, 30, 50])
    .constant('pagingConstant', {
        CURRENTPAGE: 1,
        ITEMSPERPAGE: 20
    })
    .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) : 9;
            if (scope.conf.pagesLength % 2 === 0) {
                scope.conf.pagesLength = scope.conf.pagesLength - 1;
            }

            // 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) : 1;
                // 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) : 15;
                    }

                    scope.conf.itemsPerPage = parseInt(localStorage[scope.conf.rememberPerPage]);


                } else {
                    scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;
                }

                // numberOfPages
                scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage);

                // judge currentPage > scope.numberOfPages
                if (scope.conf.currentPage < 1) {
                    scope.conf.currentPage = 1;
                }

                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 = 0; 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 = 1; i <= scope.conf.numberOfPages; i++) {
                        scope.pageList.push(i);
                    }
                } else {
                    var offset = (scope.conf.pagesLength - 1) / 2;
                    if (scope.conf.currentPage <= offset) {
                        for (i = 1; i <= offset + 1; 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(1);
                        scope.pageList.push('...');
                        for (i = offset + 1; i >= 1; i--) {
                            scope.pageList.push(scope.conf.numberOfPages - i);
                        }
                        scope.pageList.push(scope.conf.numberOfPages);
                    } else {
                        scope.pageList.push(1);
                        scope.pageList.push('...');

                        for (i = Math.ceil(offset / 2); i >= 1; i--) {
                            scope.pageList.push(scope.conf.currentPage - i);
                        }
                        scope.pageList.push(scope.conf.currentPage);
                        for (i = 1; i <= offset / 2; 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 = 1;
            };

            // prevPage
            scope.prevPage = function () {
                if (scope.conf.currentPage > 1) {
                    scope.conf.currentPage -= 1;
                }
            };
            // nextPage
            scope.nextPage = function () {
                if (scope.conf.currentPage < scope.conf.numberOfPages) {
                    scope.conf.currentPage += 1;
                }
            };

            //lastPage
            scope.lastPage = function () {
                scope.conf.currentPage = scope.conf.numberOfPages;
            };

            //is first page
            scope.isFirst = function () {
                if (scope.conf.currentPage > 1) {
                    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(/[^0-9]/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];
            //};
        }
    }
};

View Code

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:500        　　
};

});

View Code

 

转载于:https://www.cnblogs.com/ywblog/p/5039865.html