AngularJS-Mybatis数据分页操作

1、封装一个实体类pageResult,用来记录总记录数和当前页的内容
​
/**
* 分页结果 实体类
*/

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

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

2、服务层的接口类和实现类中封装方法，调用PageHelper分页插件
​ 实现类：

	public PageResult findPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        Page page = (Page) brandMapper.selectByExample(null);
        return new PageResult(page.getTotal(),page.getResult());
    }

3、控制类，返回给浏览器一个PageResult对象
​

@RequestMapping("/findPage.do")
public PageResult findPage(int pageNum,int pageSize){
     return brandService.findPage(pageNum,pageSize);
}

4、前端代码。使用分页插件来实现

1. 在webapp下引入插件的文件
   ​ pagination.css
   ​ pagination.js

2. 页面引入插件

   <script src="../plugins/angularjs/pagination.js"></script>
   <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
   

3. 在需要使用分页条的地方进行分页

   <!-- 分页，conf为模块中配置的名字 -->
   <tm-pagination conf="paginationConf"></tm-pagination>
   

4. 在声明模块的时候引入分页插件的模块

   //声明模块，引入分页插件模块'pagination'
   var app = angular.module('xianghaigou',['pagination']);
   

5. 配置分页插件，分页操作交给插件完成

   //配置分页插件：currentPage：当前页；totalItems：总记录数；itemsPerPage：每页显示多少条；perPageOptions：页面大小选项
   
      $scope.paginationConf = {
          currentPage: 1,
          totalItems: 10,
          itemsPerPage: 10,
          perPageOptions: [10, 20, 30, 40, 50],
          onChange: function(){
              $scope.reloadList(); //改变参数后重新调用方法，加载页面
          }
      };
      //点击页码，分页插件调用该方法
      $scope.reloadList=function () {    	$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
      };
   

6. 分页请求操作,修改分页插件中的总记录数

   //分页查询品牌
   $scope.findPage = function (pageNum,pageSize) {
   	$http.get('../brand/findPage.do?pageNum='+pageNum+'&pageSize='+pageSize).success(function (data) {
              $scope.brandList = data.rows;
              $scope.paginationConf.totalItems = data.total;
          })
   };
   

   **注意： ** 当使用该分页插件时，body里面在无须在初始化angularJS（不用再配置初始化方法 ng-init=""）