PageHelper分页插件入门使用-优快云博客

本文链接：https://blog.youkuaiyun.com/chenchen818/article/details/103266134

本文详细介绍了如何在前后端分离的项目中使用分页插件，包括MyBatis分页插件的配置、实体类与接口实现，以及Angular前端插件的使用方法，通过实例展示了数据的分页展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    分页插件使用 
前后端传送的数据 
后端给前端的数据： 
  总记录数
当前页记录
(total:100,rows:[])
 
前端给后端的数据； 
  当前页
每一页的记录数
 
 
数据传收方式 
方法1：定义一个MAP
 Map map = new HashMap();map.put('total',100);map.put(rows,list)
方法2：创建类，包含total和rows属性(下面用这种)
 
代码 
配置mybatis分页插件<?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>
 
实体类PageResultpublic class PageResult implements Serializable{
    private long total;//总记录数
    private List rows;//当前页面记录
}
 
接口实现类//参数：当前页码，每页记录数
public PageResult findPage(int pageNum, int pageSize){
    PageHelper.startPage(pageNum, pageSize);
    //业务层方法
    Page<TbBrand> page = (Page<TbBrand>)brandMapper.selectExample(null);
    return new PageResult(page.getTotal(), page.getResult());
}
 
控制层方法@RequestMapping("/findPage")
public PageResult findPage(int page, int size){
    return brandService.findPage(page,size)
}
 
前端代码(angular的插件)<html>
<head>
    <!-- 分页组件开始 -->
    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <!-- 分页组件结束 -->
    <script type="text/javascript">
        var app=angular.module('pinyougou',['pagination']);
        app.controller('brandController',function($scope,$http){
        //分页控件配置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.search( $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>
</head>
<body>
    <table></table>
<tm-pagination conf="paginationConf">
</body>
</html>
 

                