angular js 分页

一、编写实体类PageResult

public class PageResult implements Serializable {
    private Long total;//总记录数
    private List rows;//当前页的结构

    public PageResult() {
    }

    public PageResult(Long total, List rows) {
        this.total = total;
        this.rows = rows;
    }

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }
}
二、编写service

//分页
public PageResult findPage(Integer total,Integer rows);
三、编写serviceImpl

@Override
public PageResult findPage(Integer total,Integer rows) {
    // 利用mybatis分页助手
    PageHelper.startPage(total,rows);
    Page<Brand> brandsList = (Page<Brand>) brandDao.selectByExample(null);
    return new PageResult(brandsList.getTotal(),brandsList.getResult());
}
四、编写controller

//  分页查询
@RequestMapping("/findPage")
public PageResult findPage(Integer page, Integer rows){
    PageResult re = brandService.findPage(page, rows);
    return re;
}
五、编写页面html，引入相关的js，css

var app=angular.module('pingyougou',['pagination']);
app.controller('brandController',function($scope,$http){

$scope.reloadList=function(){
   //  切换页码  第一个参数是当前页  第二个参数 ：每页展示的数据条数
   $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//  分页控件配置
$scope.paginationConf = {
   //  当前页
   currentPage: 1,
   //  默认总条数
   totalItems: 10,
   // 每页展示的条数
   itemsPerPage: 10,
   //  每页展示的多少条  下拉框   默认是10条 也可以手动选择
   perPageOptions: [10, 20, 30, 40, 50],
   onChange: function(){
      $scope.reloadList();//重新加载
   }
};
//切换页码  第一个参数是当前页  第二个参数 ：每页展示的数据条数
$scope.findPage=function(page,rows){
   $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
         function(response){
            //  返回的数据集合 List<Brand>
            $scope.list=response.rows;
            // 查询到的总记录数
            $scope.paginationConf.totalItems=response.total;//更新总记录数
         }
   );
}
}

<tm-pagination conf="paginationConf"></tm-pagination>

转载于:https://www.cnblogs.com/zhangrongfei/p/11328274.html