使用AngularJS实现局部分页

JSP代码

<div class="zx-progcontent-bottom">
    <nav aria-label="Page navigation">
        <input type="hidden" ng-model="courseId">
        <%--<ul class="pagination" style="margin: 0px;">--%>
            <%--<li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>--%>
            <%--<li ng-class="{true:'active'}[p_current==page]" ng-repeat="page in pages track by $index"><a href="javascript:void(0);" ng-click="load_page(page)">{{page}}</a></li>--%>
            <%--<li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>--%>
        <%--</ul>--%>
        <%--<span style="vertical-align: 12px;">&nbsp;&nbsp;共：{{count}} 条</span>--%>

            <ul class="pagination  pagination-sm zx-progpage">
                <li class="tiao">共{{count}}条</li>
                <li ng-class="{true:'disabled'}[p_current==1]">
                    <a href="javascript:void(0);" aria-label="Previous" ng-click="p_index()" >
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li ng-class="{true:'disabled'}[p_current==1]">
                    <a href="javascript:void(0);" aria-label="Previous" ng-click="load_page(p_current-1)">
                        <span aria-hidden="true">上页</span>
                    </a>
                </li>
                <li ng-class="{true:'active'}[p_current==page]" ng-repeat="page in pages track by $index">
                    <a href="javascript:void(0);" aria-label="Previous" ng-click="load_page(page)">
                        <span aria-hidden="true">{{page}}</span>
                    </a>
                </li>
                <li ng-class="{true:'disabled'}[p_current==p_all_page]">
                    <a href="javascript:void(0);" aria-label="Next" ng-click="load_page(p_current+1)">
                        <span aria-hidden="true">下页</span>
                    </a>
                </li>
                <li ng-class="{true:'disabled'}[p_current==p_all_page]">
                    <a href="javascript:void(0);" aria-label="Next" ng-click="p_last()">
                        <span aria-hidden="true">尾页</span>
                    </a>
                </li>
            </ul>
    </nav>
</div>

JS代码：

var app = angular.module('CourseKpointStudyModule', []);
    app.controller("CourseListCtrl",function($scope,$http){
        //配置
        $scope.count = 0;
        $scope.p_pernum = 0;
        //变量
        $scope.p_current = 1;
        $scope.p_all_page =0;
        $scope.pages = [];
        $scope.sort="";

        /**
        *获取数据 注意：此方法的接收需要用@RequestBody Map<String,Object> param 来接收
        */
        $scope.get = function(page,size,sort,courseId,callback){
            console.log(page);
            $http({method: "POST",
            url:'${ctx}/front/showCourseListPage',
                //参数为要跳转的页码
                data:{'currentPage':page}
            }).success(function(data){
                if(data.success)
                {
                    var page=data.page;
                    //总条数
                    $scope.count=page.totalResultSize;
                    //获取的数据
                    $scope.courseList=data.courseList;
                    $scope.p_current = page.currentPage;
                    //当前页
                    $scope.p_all_page=page.totalPageSize;

                     //重新计算页面
                    reloadPno();
                    //回调函数，暂时没用，可根据自己需求进行传入
                    callback;
                } else{
                    alert("加载失败");
                }

            });
        }
            //初始化第一页
        $scope.get($scope.p_current,$scope.p_pernum,"",0,function(){ });
        //加载某一页
        $scope.load_page = function(page){
            var totalPage=$scope.p_all_page;
//            var courseId=$scope.courseId;
            var sort=$scope.sort;
            console.log(sort);
            if(page<1 || page>totalPage){

            }else{
                $scope.get(page,$scope.p_pernum,sort,0,function(){ });
            }
        }
        //单选按钮选中
        $scope.select= function(id){
            alert(id);
        }
        //首页
        $scope.p_index = function(){
            $scope.load_page(1,$scope.p_pernum,$scope.sort,0);
        }
        //尾页
        $scope.p_last = function(){
            $scope.load_page($scope.p_all_page,$scope.p_pernum,$scope.sort,0);
        }

        //初始化页码
       var reloadPno2 = function(){
           $scope.pages = [];
            //分页算法
            for(var i = 1; i <= $scope.p_all_page; i++) {
                if(i == 2 && $scope.p_current - 6 > 1) {
                    i = $scope.p_current - 6;
                }else if(i == $scope.p_current + 6 && $scope.p_current + 6 < $scope.p_all_page) {
                    i = $scope.p_all_page - 1;
                }else{
                    $scope.pages.push(i);
                }
            }
        }
 });