品牌列表分页的实现
3.1 需求分析
在品牌管理下方放置分页栏，实现分页功能
3.1 后端代码3.1.1 分页结果封装实体
在 pinyougou-pojo 工程中创建 entity 包，用于存放通用实体类，创建类
PageResult
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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();
|
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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 中实现该方法
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
4
5
6
7
8
|
@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 新增方法
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
|
/**
*返回全部列表
*@return
*/ @RequestMapping("/findPage")
public PageResult findPage(int page,int rows){
return brandService.findPage(page, rows);
}
|
3.3 前端代码3.3.1 HTML
在 brand.html 引入分页组件
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
4
5
6
7
|
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
|
构建 app 模块时引入 pagination 模块
[AppleScript] 纯文本查看 复制代码
?
|
1
|
var app=angular.module('pinyougou',['pagination']);//定义品优购模块
|
页面的表格下放置分页组件
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
|
<!-- 分 页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
|
3.3.1 JS 代码
在 brandController 中添加如下代码
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//重新加载列表 数据
$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){
|
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
$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：更改页面时触发事件
