分页指令

//
//
//
'use strict';
//
angular.module('pagination', []).directive("pagination", function() {
    //
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            option: '=pageOption',
            query: '&',
            pageable: '='
        },
        template: '<div class="row navigation_box" style="padding:15px">' +
            '    <div class="pull-right">' +
            '        <ul class="pagination">' +
            '           <li><span><span ng-bind="$root.i18n.total_elements">总数</span>:<b ng-bind="option.totalElements"></b></span></li>' +
            '           <li><span><span ng-bind="$root.i18n.total_page">页数</span>:<b ng-bind="option.totalPages"></b></span></li>' +
            '        </ul>' +
            '    </div>' +
            '    <div class="pull-right" style="margin-right: 26px">' +
            '        <nav aria-label="Page navigation">' +
            '            <ul class="pagination">' +
            '                <!-- 当前 加active 不能点击 disabled -->' +
            '                <li class="first" ng-class="isFirst() && \'disabled\'"><a href="javascript:void(0)" ng-click="pre()" ng-bind="$root.i18n.previous_page">上一页</a></li>' +
            '                <li ng-repeat="p in page" ng-class="option.number==(p -1) && \'active\'"><a href="javascript:void(0)" ng-click="pageClick(p)">{{p}}</a></li>' +
            '                <li class="last" ng-class="isLast() && \'disabled\'"><a href="javascript:void(0)" ng-click="next()" ng-bind="$root.i18n.next_page">下一页</a></li>' +
            '            </ul>' +
            '        </nav>' +
            '    </div>' +
            '</div>',
        link: function($scope) {
            //
            $scope.option.$promise.then(function() {
                //
                //得到显示页数的数组
                $scope.page = getRange($scope.option.number, $scope.option.totalPages, 5);
                //
                $scope.isFirst = isFirst;
                //
                $scope.isLast = isLast;
            })

            //
            function isFirst() {
                return $scope.option.number === 0;
            }
            //
            function isLast() {
                return $scope.option.totalPages === 0 || $scope.option.number == $scope.option.totalPages - 1;
            }
            //
            $scope.pre = function() {
                $scope.pageClick('上一页');
            }
            $scope.next = function() {
                $scope.pageClick('下一页');
            }
            //绑定点击事件
            $scope.pageClick = function(page) {
                if (page == '上一页') {
                    if (isFirst()) {
                        return;
                    }
                    page = parseInt($scope.option.number) - 1;
                } else if (page == '下一页') {
                    if (isLast()) {
                        return;
                    }
                    page = parseInt($scope.option.number) + 1;
                } else {
                    page -= 1;
                }
                if (page < 1) {
                    page = 0;
                } else if (page > $scope.option.totalPages) {
                    page = $scope.option.totalPages - 1;
                }
                //点击相同的页数 不执行点击事件
                if (page == $scope.option.number) {
                    return;
                }
                //
                $scope.option.number = page;
                $scope.pageable.page = page;
                //
                $scope.query()
                //
                $scope.page = getRange($scope.option.number, $scope.option.totalPages, 5);
            }
            //返回页数范围(用来遍历)
            function getRange(curr, all, count) {
                //计算显示的页数
                curr = parseInt(curr) + 1;
                all = parseInt(all);
                count = parseInt(count);
                var from = curr - parseInt(count / 2);
                var to = curr + parseInt(count / 2) + (count % 2) - 1;
                //显示的页数容处理
                if (from <= 0) {
                    from = 1;
                    to = from + count - 1;
                    if (to > all) {
                        to = all;
                    }
                }
                if (to > all) {
                    to = all;
                    from = to - count + 1;
                    if (from <= 0) {
                        from = 1;
                    }
                }
                var range = [];
                for (var i = from; i <= to; i++) {
                    range.push(i);
                }
                return range;
            }
        }
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值