angularjs bootstrap 分页实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/FJcsdn/article/details/81251605

js

 /********变量定义及初始化start**********/
        $scope.pageInfo = {pageSize:5};//分页信息初始化
     $scope.rentForm = {};//二手房查询条件
     /********变量初始化end**********/
     
     /********分页信息管理start*********/
         // 加载上一页
     $scope.prev = function() {
             $scope.selectPage($scope.pageInfo.pageNum - 1);
         }
     //加载下一页
     $scope.next = function() {
             $scope.selectPage($scope.pageInfo.pageNum + 1);
         }
         // 加载指定页
     $scope.selectPage = function(page) {
         // page 超出范围
         if($scope.pageInfo.pages != 0 && (page < 1 || page > $scope.pageInfo.pages)) {
             return;
         }
         // 发送分页请求
         $http({
             method: 'POST',
             url: "/SHS/secondHandSourceList",
             params: {
                 transaction:'CS',
                 pageNum: page, // 页码
                 pageSize: $scope.pageInfo.pageSize // 每页记录数
             }
         }).then(function successCallback(data, status, headers, config) {
                $scope.list = data.data.list;
                $scope.date = data.data;
             $scope.pageInfo = data.data;
             console.log($scope.pageInfo)
         }, function errorCallback(data, status, headers, config) {
             alert("出错，请联系管理员 ");
         });
     }
     // 判断是否是当前页
     $scope.isActivePage = function(page) {
         return page === $scope.pageInfo.pageNum;
     }
     /********分页信息管理end*********/
     // 初始化，选中第一页
     $scope.selectPage(1);
     
     /********条件搜素start***********/
     $scope.priceChange = function(min,max) {
        
     }

     html 页面 

  <nav style="text-align: center;">
                    <ul class="pagination">
                    <li><a href="javascript:;" ng-click="selectPage(1)">首页</a></li>  
                    <li><a href="javascript:;" ng-click="prev()">上一页</a></li>
                    <li ng-repeat="page in date.navigatepageNums" >
                    <a ng-click="selectPage(page)">{{page}}</a>
                    </li>
                    <li><a href="javascript:;" ng-click="next()">下一页</a></li>
                    <li><a href="javascript:;" ng-click="selectPage(date.pages)">尾页</a></li>
                  </ul>
                </nav>

controller

    @ResponseBody
    @RequestMapping(value="/secondHandSourceList",method=RequestMethod.POST)
    public PageInfo<Map<String,Object>> secondHandSourceList( Integer pageNum, Integer pageSize,String transaction) throws Exception{
         String agentId = "";
        return secondHandSourceService.secondHandSource(pageNum, pageSize, transaction,agentId);
    }