Springboot+mybatis+PageHelper 前端使用bootstrap-table实现分页

项目是使用maven工程管理,因此导入pagehelper的依赖,可以通过以下链接找最新的依赖
https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter

	<dependency>
		<groupId>com.github.pagehelper</groupId>
		<artifactId>pagehelper-spring-boot-starter</artifactId>
		<version>1.2.13</version>
	</dependency>

整个pom的依赖为

<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.0</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>	
		<dependency>
			<groupId>com.oracle</groupId>
			<artifactId>ojdbc6</artifactId>
			<version>11.2.0.4</version>
		</dependency>
		<!-- shiro -->	
		<!-- 热部署模块 -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-devtools</artifactId>
		    <optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
		</dependency>
		
		<!--分页插件-->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.13</version>
		</dependency>
	</dependencies>

上面是使用oracle数据库的,如果换成mysql记得驱动依赖包换一下,application.yml配置文件是

spring:
  datasource:
    url: jdbc:oracle:thin:@localhost:1521:orcl 
    username: test
    password: 123456
  http:
    encoding:
      charset: utf-8
      force: true
      enabled: true

#spring集成Mybatis环境
#加载Mybatis配置文件   
mybatis:
  mapper-locations:
    - classpath:mapper/*Mapper.xml
  config-location: classpath:mapper/config/sqlMapConfig.xml
  type-aliases-package: cn.sysu.pojo #定义别名
pagehelper:
  helperDialect: oracle #这里填写使用的数据库mysql、oracle等
  reasonable: true #分页合理化参数,默认是false,设置为true后小于1的页数默认1,大于最大页的数默认定位到最后一页
  supportMethodsArguments: true
  params: count=countSql
server:
  tomcat:
    uri-encoding: UTF-8
  port: 8080
  servlet:
    context-path: /test

使用PageHelper很简单,在service层方法中,在使用dao层方法查询时前面添加一句代码

//开启分页
PageHelper.startPage(pageNum,pageSize);

pageNum是页码,pageSize是每页显示多少条,这里把这两个参数封装成一个pojo对象


public class Page {

	/**
	 * 当前页码
	 */
	private int pageNum;
	/**
	 * 每页数量
	 */
	private int pageSize;

	//get和set方法略去
}

最后开启PageHelper为:

//开启分页
PageHelper.startPage(page.getPageNum(),page.getPageSize());

因此前端只要传递相应的参数即可
!注意!!!!
!注意!!!!
!注意!!!!

Bootstrap-table对返回来的参数分页必须是以下格式,否则显示No matching records found
返回数据格式:
{ “total”: 42, “rows”: [ { “id”: 1, “name”: “张三”, “age”: 18, “address”: “北京” }, { “id”: 2, “name”: “张三”, “age”: 18, “address”: “北京” }…]

因此还得需要一个查询数据库记录总数的dao代码,这里就略去了;
把返回的数据类型封装成一个pojo对象


import java.util.List;

public class DataAddPage<T> {

	/**
	 * 控制台必须返回这个包含total,和row的参数,否则bootstrap-table没法对返回数据页
	 */
	private int total;

	private List<T> rows;

	//get和set方法略去
}

Controller方法为:

    @RequestMapping("/getDataByPage")
    @ResponseBody
    public DataAddPage<Data> getDataByPage(Page page) {
        DataAddPage<Data> res = new DataAddPage<Data>();
        res.setTotal(dataService.getDataSize());
        res.setRows(dataService.getDataByPage(page));
        return res;
    }

前端代码为

$('#dataTable').bootstrapTable({
		url:"getDataByPage",
		idField: 'id',
		search: true,
		pageNumber : 1, //初始化加载第一页
		pagination: true,
		sidePagination : 'server',//server:服务器端分页|client:前端分页
		pageSize: 10,
		pageList: [10,20,50],
		showRefresh : true,//刷新按钮
		queryParams : function(params) {//上传服务器的参数
			console.log(params);
			var page = {
				pageNum :(params.offset)/(params.limit) + 1,
				pageSize : params.limit  // 每页显示数量
			};
			return page;
		},
		columns: [
			{field: 'id', title: '编号'},
			{field: 'data', title: '数据(KN)'},
			{field: 'time', title: '时间'},
		]
	});

因为整个项目还有其他的业务功能这里不显示全部代码,后续我把该删的都删了再发到github上,大家可以直接参考使用(肯定能运行成功的),欢迎大家关注和点赞,谢谢支持。护发路上互相扶持!!!


版权声明:本文为dogHuaMing原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。