品优购分页显示品牌

效果图

品牌列表分页的实现

3.1需求分析

在品牌管理下方放置分页栏，实现分页功能

品优购分页显示品牌

3.2后端代码

3.2.1 分页结果封装实体

在pinyougou-pojo工程中创建entity包，用于存放通用实体类，创建类PageResult

package com.pinyougou.entity;

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

/**
 * @Auther: jun
 * @Date: 2018/8/19 0019 14:43
 * @Description: 分页结果封装类
 */
public class PageResult implements Serializable {

    //总记录数
    private long total;
    //当前页记录数
    private List<?> rows;

    public PageResult(long total, List<?> rows) {
        this.total = total;
        this.rows = rows;
    }
    //set和get方法

3.2.2 服务接口层

在pinyougou-sellergoods-interface的BrandService.java 增加方法定义

/**
 * 品牌分页
 * @auther: jun
 * @date: 2018/8/19 0019 14:48
 * @param pageNum 当前页码
 * @param pageSize 每页记录数
 * @return:
 */
public PageResult findPage(int pageNum,int pageSize);

3.2.3 服务实现层

在pinyougou-sellergoods-service的BrandServiceImpl.java中实现该方法

@Override
public PageResult findPage(int pageNum, int pageSize) {
    //设置分页插件的分页记录查询条件
    PageHelper.startPage (pageNum,pageSize);
    //查询记录数
    Page<TbBrand> pages = (Page<TbBrand>) brandMapper.selectByExample (null);
    return new PageResult (pages.getTotal (),pages.getResult ());
}

PageHelper为MyBatis分页插件

3.2.4 控制层

在pinyougou-manager-web工程的BrandController.java新增方法

/**
 * 分页显示品牌信息
 * @auther: jun
 * @date: 2018/8/19 0019 15:57
 * @param page 页码
 * @param size 记录数
 * @return: com.pinyougou.entity.PageResult
 */
@RequestMapping("/findPage")
public PageResult findPage(int page,int size){
    //调用服务层执行查询所有品牌操作
    return brandService.findPage (page,size);
}

3.3前端代码

3.3.1 HTML

在brand.html引入分页组件

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

这个分页插件是必须在angularjs下面插入

页面的表格下放置分页组件

   <!--数据列表/-->                        
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>

3.3.2 JS代码

在brandController中添加如下代码

var app=angular.module('pinyougou',['pagination']);//定义了一个叫pinyougou的模块

 //分页控件配置
         $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);
}
   //分页显示方法
   $scope.findPage=function (page,size) {
   $http.get('../brand/findPage.do?page='+ page +'&size='+ size).success(function (response) {
      $scope.list=response.rows;//显示当前页的记录数据
      $scope.paginationConf.totalItems=response.total;//修改总记录数
             });
         }

在页面的body元素上去掉ng-init指令的调用