Angularjs 实现分页

一，HTML

toRequest（page）：根据页码发送请求的函数；

toIndex()：跳转到首页；

prePage()：上一页；

nextPage()：下一页；

toLast()：跳转到尾页；

用户点击触发的是toRequest（page），会获取他所点击的页码，然后进行跳转。

<div class="paging row">
                    <div class="col-md-5">
                        <div>
                            <span> 总记录：{{count}} 条数据</span>
                            <span> 页次：{{current}}/{{maxPage}} </span>
                        <#--<span> 跳转：</span>-->
                        </div>
                        <div class="input-group col-md-4">
                            <input type="number" class="form-control" min="1" ng-model="inputPage" >
                            <span class="input-group-addon" ng-click="toRequest(inputPage)">确定</span>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <ul class="pagination pull-right" >
                            <li ng-class="{true:'disabled'}[current==1]"><a href="javascript:;" ng-click="toIndex()" class="pagingNoCss">首页</a></li>
                            <li ng-class="{true:'disabled'}[current==1]"><a href="javascript:;" ng-click="prePage()" class="pagingNoCss">上一页</a></li>
                            <li ng-repeat="page in pages" ng-class="{true:'active'}[current==page]"><a href="javascript:void(0);" ng-click="toRequest(page)" class="pagingNub">{{ page }}</a></li>
                            <li ng-class="{true:'disabled'}[current==maxPage]"><a href="javascript:;" ng-click="nextPage()" class="pagingNoCss">下一页</a></li>
                            <li ng-class="{true:'disabled'}[current==maxPage]"><a href="javascript:;" ng-click="toLast()" class="pagingNoCss">尾页</a></li>
                        </ul>
                    </div>
                </div>

二，分页算法函数

pages []：是要在html中遍历出页码的数组；

current ：当前页码；

inputPage：用户输入的页码，用于直接跳转

函数中的三个参数：

current ：当前页码（要去的页码，将会在中央高亮显示的页码）；

length：总页码数；

displayLength：页面上要显示的页码数；

start ：用于遍历生成pages数组的起始页码；

end ：用于遍历生成pages数组的结束页码；

 //配置
        $scope.pages = [];
        $scope.pageInfo = {};
        $scope.current = 1;
        $scope.inputPage = 1;

        //分页算法
        $scope.calculateIndexes = function (current, length, displayLength) {
            $scope.pages = [];

            // 普通情况，页数中没有首页和尾页
            var start = Math.round(current - displayLength / 2);
            var end = Math.round(current + displayLength / 2)-1;

            //页数中有首页
            if (start <1) {
                // console.log(start+"小于1")
                start = 1;
                // 默认显示的最后一个数字为设置的页码显示长度
                end = displayLength;
                if (end >= length) {
                    // console.log(end+"Da于"+length)

                    // 短于设置的页码数，则为其本身长度
                    end = length;
                }

            }else if(end >= length){
                //页数中有尾页
                //     console.log(end+"大于等于"+length)
                end = length;
                start = end - displayLength + 1;
                if (start <= 1) {
                    start = 1;
                }

            }

            // 遍历生成数组
            for (var i = start; i <= end; i++) {
                $scope.pages.push(i);
            }
            //
            // console.log(current)
            // console.log(length)
            // console.log(start)
            // console.log(end)
            // console.log($scope.pages)
        };

三，其他函数

reloadPno （）：初始化页码函数，每次在请求完成，后台数据返回的时候调用

这时候会传入三个值：$scope.current（要跳转的页码），$scope.maxPage（最大页数），5（展示的页码数）

 //首页
    $scope.toIndex = function(){
        $scope.toRequest(1);
    }
    //尾页
    $scope.toLast = function(){
        $scope.toRequest($scope.maxPage);
    }
    //上一页
    $scope.prePage=function(){
        $scope.toRequest($scope.current-1);
    }
    //下一页
    $scope.nextPage=function(){
        $scope.toRequest($scope.current+1);
    }
    //初始化页码
    $scope.reloadPno = function(){
        $scope.calculateIndexes($scope.current,$scope.maxPage,5);
        // console.log($scope.pages);
    };