品优购学习笔记二-品牌列表分页的实现

1.品牌列表分页的实现

效果展示：

1557319280449.png

1.1后端代码

1.1.1 分页结果封装实体

package entity;

import java.io.Serializable;
import java.util.List;

public class PageResult implements Serializable{
    
    private static final long serialVersionUID = 1L;
    private long total;
    private List rows;
    
    public PageResult(long total, List rows) {
        super();
        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;
    }
    
}

1.1.2服务接口层

    /**
     * 返回分页列表
     * @return
     */
    public PageResult findPage(int pageNum,int pageSize);

1.1.3服务实现层

@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分页插件

1557319764350.png

1.1.4 控制层

    /**
     *返回全部列表
     * @param page
     * @param rows
     * @return
     */
    @RequestMapping("/findPage")
    public PageResult  findPage(int page,int rows){         
        return brandService.findPage(page, rows);
    }
    

运行结果：

1557320219867.png

1.2前端代码

在brand.html引入分页组件

<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->

构建app模块时引入pagination模块

1557320443187.png

在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;//更新总记录数
            }           
    );
}

• currentPage：当前页码
• totalItems:总条数
• itemsPerPage:
• perPageOptions：页码选项
• onChange：更改页面时触发事件

github地址：https://github.com/smallmartial/pinyougou>