基于angularjs的列表分页

这里我用的是angularjs1.X的版本，使用directive自定义指令完成前端列表的分页功能，废话不多说，上代码。

myPagination.js：

var app = angular.module('orderManagement', ['ui.router'])//[里面放项目需要用到的依赖]
app.directive('myPagination', function () {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            pageOption: '=',
            go: '=',
            alert:'&'//调用父级自定义的alert弹窗
        },
        template:'<div class=" form-inline">'+'<div class="col-md-8 padmar0">'+ '<ul class="pagination">' +
        '<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{pageOption.curr==p?\'active\':\'\'}}">' +
        '<a href="javascript:;">{{p}}</a>' +
        '</li>' +
        '</ul>'+'</div>'+'<div class="col-md-4 padmar0" style="margin-top: 20px;">{{pageOption.curr}}/{{!pageOption.all?1:pageOption.all}}  '+'<input class="form-control" style="width: 21%;" type="number" min="1" max="{{pageOption.all}}" ng-model="go">'+'  <a class="btn btn-primary btn-sm btn-pad" ng-click="jump(go)">跳转</a>'+'<span style="margin-left: 20px;">共：{{!pageOption.all?1:pageOption.all}}  页；</span>'+' <span>   {{pageOption.items}}  条</span>'+'</div>'+'</div>',//template这里根据自己的项目需要自定义模板字符串
        link: function ($scope) {
            //容错处理
            if (!$scope.pageOption.curr || isNaN($scope.pageOption.curr) || $scope.pageOption.curr < 1) $scope.pageOption.curr = 1;
            if (!$scope.pageOption.all || isNaN($scope.pageOption.all) || $scope.pageOption.all < 1) $scope.pageOption.all = 1;
            if ($scope.pageOption.curr > $scope.pageOption.all) $scope.pageOption.curr = $scope.pageOption.all;
            if (!$scope.pageOption.count || isNaN($scope.pageOption.count) || $scope.pageOption.count < 1) $scope.pageOption.count = 10;
            //得到显示页数的数组，一定要用$watch监听接口返回数据的变化，否则在查询的时候翻页的页数不会变化
            $scope.$watch('pageOption',function (p1,p2) {
                $scope.page = getRange($scope.pageOption.curr, $scope.pageOption.all, $scope.pageOption.count);
            })
            //绑定点击事件
            $scope.pageClick = function (page) {
                if (page == '上一页') {
                    page = parseInt($scope.pageOption.curr) - 1;
                } else if (page == '下一页') {
                    page = parseInt($scope.pageOption.curr) + 1;
                }else if(page == '首页'){
                    page=1;
                }else if(page == '尾页'){
                    page=$scope.pageOption.all;
                }
                if (page < 1) page = 1;
                else if (page > $scope.pageOption.all) page = $scope.pageOption.all;
                //点击相同的页数 不执行点击事件
                if (page == $scope.pageOption.curr) return;
                if ($scope.pageOption.click && typeof $scope.pageOption.click === 'function') {
                    $scope.pageOption.click(page);
                    $scope.pageOption.curr = page;
                    $scope.page = getRange($scope.pageOption.curr, $scope.pageOption.all, $scope.pageOption.count);
                }
            };
		//跳转分页
            $scope.jump=function (nmb) {
                if(nmb>=1&&nmb<=$scope.pageOption.all){
                    $scope.pageClick(nmb);
                }else{
                    $scope.alert();
                    $scope.go=""
                }
            }

            //返回页数范围（用来遍历）
            function getRange(curr, all, count) {
                //计算显示的页数
                curr = parseInt(curr);
                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);
                }
                range.push('下一页');
                range.unshift('上一页');
                range.push('尾页');
                range.unshift('首页');
                return range;
            }

        }
    }
});

html：

<my-pagination page-option="option" go="go" alert="myAlert()"></my-pagination>

列表页面的controller，contrller.js:

app.controller("repayListConts",["$scope","$rootScope",function($scope,$rootScope){
 function list(page) {
        $.ajax({
            type: 'GET',
            async: false,//这里一定要用同步请求，否则directive拿不到分页的数据
            url: "/order/getOrderList?userName="+$scope.ordlist.clientName+"&userNationalid="+$scope.ordlist.clientId+"&userPhone="+$scope.ordlist.clientPhone+"&empNameCode="+$scope.ordlist.employeeNumber+"&state="+$scope.ordlist.orderState+"&orderCode="+$scope.ordlist.orderNumber+"&applyStartTime="+$scope.ordlist.applyStartTime+"&applyEndTime="+$scope.ordlist.applyEndTime+"&moneyResource="+$scope.ordlist.fundingChannels+"&level1Code="+$scope.ordlist.level1Code+"&level2Code="+$scope.ordlist.level2Code+"&level3Code="+$scope.ordlist.level3Code+"&orgCode="+$scope.ordlist.orgCode+"&storeCode="+$scope.ordlist.stores+"&page="+page+"&size="+$scope.ordlist.pageSize
        success:function successCallback(res) {
            //设置分页的参数，具体参数从返回的数据中取，以及具体的列表逻辑操作都写在这里
            $scope.option = {
                curr: page,  //当前页数
                all: $scope.PageCount,  //总页数
                count: $scope.PageCount > 10 ? 10 : $scope.PageCount,  //最多显示的页数，默认为10
                items: $scope.totalData,//总条数

                //点击页数的回调函数，参数page为点击的页数
                click: function (page) {
                    list(page);
                }
            }
        },
            error:function errorCallback(response) {
            $rootScope.alertPart("获取列表失败！")
        }
        })
    }
    $scope.myAlert=function () {//$rootScope.alertPart()是全局自定义的一个alert弹窗，不需要的小伙伴可忽略。
        $rootScope.alertPart("请输入有效页码！")
    };
}

最终的效果就是这样子啦，很简单吧~