Java之品优购课程讲义_day02（3）

品牌列表分页的实现
3.1 需求分析
在品牌管理下方放置分页栏，实现分页功能

3.1 后端代码3.1.1 分页结果封装实体
在 pinyougou-pojo 工程中创建 entity 包，用于存放通用实体类，创建类
PageResult

package  entity;[/size][/font][/align][font=微软雅黑][size=3]

import  java.util.List;

/**

*分页结果封装对象

*@author  Administrator

*

*/

public  class  PageResult  implements  Serializable{

private  long  total;//总记录数

private  List  rows;//当前页结果

public  PageResult(long  total,  List  rows)  {

super();

this.total  =  total;

this.rows  =  rows;

}

//getter    and  setter  .....

}

3.1.1 服务接口层
在 pinyougou-sellergoods-interface 的 BrandService.java 增加方法定义

3.1.1 服务实现层
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 中实现该方法

@Override

public  PageResult  findPage(int  pageNum,  int  pageSize)  { PageHelper.startPage(pageNum,  pageSize);
Page<TbBrand>  page=  (Page<TbBrand>)  brandMapper.selectByExample(null);

return  new  PageResult(page.getTotal(),  page.getResult());

}
PageHelper 为 MyBatis 分页插件

3.1.1 控制层
在 pinyougou-manager-web 工程的 BrandController.java 新增方法

/**

*返回全部列表

*@return

*/ @RequestMapping("/findPage")
public  PageResult    findPage(int  page,int  rows){

return  brandService.findPage(page,  rows);

}

3.3 前端代码
3.3.1 HTML
在 brand.html 引入分页组件

<!-- 分页组件开始 -->

<script src="../plugins/angularjs/pagination.js"></script>

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

<!-- 分页组件结束 -->
构建 app 模块时引入 pagination 模块

var app=angular.module('pinyougou',['pagination']);//定义品优购模块
页面的表格下放置分页组件

<!-- 分 页 -->

<tm-pagination conf="paginationConf"></tm-pagination>
3.3.1 JS 代码
在 brandController 中添加如下代码

//重新加载列表 数据

$scope.reloadList=function(){

//切换页码

$scope.findPage(  $scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);

}

//分页控件配置

$scope.paginationConf  =  {

currentPage:  1,

totalItems:  10,

itemsPerPage:  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){

$scope.list=response.rows;

$scope.paginationConf.totalItems=response.total;//更新总记录数

}

);

}

在页面的 body 元素上去掉 ng-init 指令的调用
paginationConf 变量各属性的意义：
currentPage：当前页码
totalItems:总条数itemsPerPage:
perPageOptions：页码选项onChange：更改页面时触发事件

转载于:https://blog.51cto.com/13517854/2152002