pageHelp分页功能实现

使用pageHelp加pagination加Javascript实现分页功能

1、首先加载pageHelp依赖

  <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>4.0.0</version>
  </dependency>

2、在mybatis配置文件里配置pageHelp插件

<!-- 配置SqlSessionFactoryBean整合MyBatis -->
	<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 指定MyBatis全局配置文件位置 -->
		<property name="configLocation" value="classpath:mybatis-config.xml"/>
		
		<!-- 指定Mapper.xml配置文件位置 -->
		<property name="mapperLocations" value="classpath:mybatis/mapper/*Mapper.xml"/>
		
		<!-- 装配数据源 -->
		<property name="dataSource" ref="dataSource"/>
		
		<!-- 配置pageHelper插件 -->
		<property name="plugins">
			<array>
				<!-- 配置PageHelper插件 -->
				<bean class="com.github.pagehelper.PageHelper">
					<property name="properties">
						<props>
							<!-- 配置数据库方言，告诉PageHelper当前使用的数据库 -->
							<prop key="dialect">mysql</prop>
							
							<!-- 配置页码的合理化修正，在1~总页数之间修正页码 -->
							<prop key="reasonable">true</prop>
						</props>
					</property>
				</bean>
			</array>
		</property>
	</bean>
	

3、下载pagination需要的js,css文件，可自行下载或者通过我的网盘下载

链接：https://pan.baidu.com/s/1ZHSwH70paczDLH7raySpXw 
提取码：z6s6

4、在jsp页面引入js,css资源

<link rel="stylesheet" href="css/pagination.css"/>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

5、jsp页面javaScript代码如下

<script type="text/javascript">
	
	$(function(){
		
		// 调用后面声明的函数对页码导航条进行初始化操作
		initPagination();
		
	});
	
	// 生成页码导航条的函数
	function initPagination() {
		
		// 获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		// 声明一个JSON对象存储Pagination要设置的属性
		var properties = {
			num_edge_entries: 3,								// 边缘页数
			num_display_entries: 5,								// 主体页数
			callback: pageSelectCallback,// 指定用户点击“翻页”的按钮时跳转页面的回调函数
			items_per_page: ${requestScope.pageInfo.pageSize},	// 每页要显示的数据的数量
			current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
			prev_text: "上一页",									// 上一页按钮上显示的文本
			next_text: "下一页"									// 下一页按钮上显示的文本
		};
		
		// 生成页码导航条
		$("#Pagination").pagination(totalRecord, properties);
		
	}
	
	// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
	// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
	// pageIndex是Pagination传给我们的那个“从0开始”的页码
	function pageSelectCallback(pageIndex, jQuery) {
		
		// 根据pageIndex计算得到pageNum
		var pageNum = pageIndex + 1;
		
		// 跳转页面,**代表请求的路径，自行设置
		window.location.href = "admin/getpage? 
        pageNum="+pageNum;
		
		// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
		return false;
	}
	
</script>

6、jsp页面中分页pagination代码：

<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>

7、controller代码如下：

@RequestMapping("/admin/getPage")
	public String getPageInfo(
				
				// 使用@RequestParam注解的defaultValue属性，指定默认值，在请求中没有携带对应参数时使用默认值
			
				
				// pageNum默认值使用1
				@RequestParam(value="pageNum", defaultValue="1") Integer pageNum,
				
				// pageSize默认值使用5
				@RequestParam(value="pageSize", defaultValue="5") Integer pageSize,
				
				ModelMap modelMap
			
			) {
		
		// 调用Service方法获取PageInfo对象
		PageInfo<Admin> pageInfo = adminService.getPageInfo(pageNum, pageSize);
		
		// 将PageInfo对象存入模型
		modelMap.addAttribute("pageInfo", pageInfo);
		
		return "admin-page";
	}

8、service逻辑层代码如下：

  public PageInfo<Admin> getPageInfo( Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Admin> list = adminMapper.selectAdmin();


        return new PageInfo<>(list);
    }

分页到这里基本就实现了，后面就是查询数据库了，相信大家都会，感觉有用的话给作者点个赞吧！！！

后端专属技术群

构建高质量的技术交流社群，欢迎从事编程开发、技术招聘HR进群，也欢迎大家分享自己公司的内推信息，相互帮助，一起进步！

文明发言，以交流技术、职位内推、行业探讨为主

广告人士勿入，切勿轻信私聊，防止被骗

关注公众号，拉你进群