网站分页

1.编写分页实体

public class PageResult implements Serializable{
    private long total;//总记录数
    private List rows;//当前页记录
    //get/set/constract
}

 

2.编写接口

在当前的接口层编写分页接口

public interface BrandService {
    public List<TbBrand> findAll();
    /**
     *  品牌分页
     * @param pageNum 当前页面
     * @param pageSize 每页记录数
     * @return
     */
    public PageResult findPage(int pageNum, int pageSize);
}

 

3.在dao层的mybatis的配置文件SqlMapCongig中配置分页插件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <plugins>
        <!-- com.github.pagehelper 为 PageHelper 类所在包名  分页插件-->
        <plugin interceptor="com.github.pagehelper.PageHelper">
            <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
            <property name="dialect" value="mysql"/>
        </plugin>
    </plugins>
</configuration>

 

4.编写实现类

在BrandServiceImpl中重写：

@Override
    public PageResult findPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        Page<TbBrand> page = (Page<TbBrand>) tbBrandMapper.selectByExample(null);
        return new PageResult(page.getTotal(), page.getResult());
    }

 

5.编写控制层

在控制层BrandController中：

@RequestMapping("/findPage")
    public  PageResult findPage(int page, int size) {
        return brandService.findPage(page, size);
    }

 

6.编写前端

 

pageination中已经封装模块，所以在页面引入模块：

 插入列表模块：

<tm-pagination conf="paginationConf"></tm-pagination>

分页控件的配置

 

<script >
    
    
    var app=angular.module('pinyougou',['pagination']); //定义了一个叫myApp的模块
    //定义控制器
    app.controller('brandController',function($scope,$http){
        
        $scope.findAll=function(){
            $http.get('../brand/findAll.do').success(
                function(response){
                    $scope.list=response;
                }                    
            );                
        }    
        
        
        //分页控件的配置 currentPage 当前页 totalItems总记录数 itemsPerPage 每页记录数  perpageOptions分页选项 onchange：当页码变更后自动触发的方法
        $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;
                }        
            );
        }

    });    

    </script>