• 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
  • 相关阅读:
    Multi-Agent Actor-Critic for Mixed Cooperative-Competitive Environments环境代码详解
    zc.buildout构建项目时报错‘AttributeError: '_NamespacePath' object has no attribute 'sort'’
    利用Jenkins打包ISO和QCOW2镜像文件
    解决python pip安装提示"not a supported wheel on this platform"
    Kali 2017.3开启VNC远程桌面登录
    Jenkins邮件扩展插件Email Extension Plugin配置使用
    Jenkins执行sudo权限的设置
    如何解决源码安装软件中make时一直重复打印configure信息
    CentOS 7下安装配置proftpd搭建ftp服务器
    如何使用capedit分割数据包文件
  • 原文地址:https://www.cnblogs.com/ywblog/p/5039865.html
Copyright © 2020-2023  润新知