今天简单给大家分享一下分页,使用的是springboot框架,简单说一下springboot,这是我用的感觉最爽的一个框架了,差不多什么都可以集成,集成也比较方便,只需要在maven中引入依赖包,在application.properties配置好需要用的参数,代码中用也好多时候直接使用注解就可以了,太简单方便了,在说一下thymeleaf模板引擎,他也是和springboot最搭的了,官方也推荐使用这个模板引擎,不推荐使用jsp,说起jsp,真是有点恶心了,之前公司项目就是用的jsp,用jsp的好处就是修改不需要重新编译重启服务器,但是代码中一会java代码,一会html/js/css,看的有点头疼,最要命的是有时候没有源码,把.class文件反编译成.java文件,改完以后在编译成.class文件,难受,在说一下mybatis,mybatis是半自动的,需要写sql,我身边的人也有好多用的是Hibernate框架,这个框架的好处是简单的crud,以及简单的业务是不需要写sql的,但是业务复杂还是挺麻烦的,我个人还是喜欢mybatis多一点,至于pagehelper和easyui分页还是看代码吧,嘻嘻
1、创建一个springboot项目
2、在pom.xml中引入依赖
<!-- springboot包 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- pagehelper需要用到的三个包 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
<version>1.2.5</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.8.1</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.2.1</version>
</dependency>
<!-- springboot-web包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- springboot测试包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- thymeleaf包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>true</scope>
</dependency>
<!-- 引入starter-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
<scope>runtime</scope>
</dependency>
<!-- MySQL的JDBC驱动包 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 引入第三方数据源 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.6</version>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>3.0.0</version>
</dependency>
</dependencies>
<build>
<finalName>myspringboot</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
3、在resource目录下创建application.properties文件,并添加配置信息
#数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/zilanxuan?useSSL=false&useUnicode=true&characterEncoding=utf-8
spring.datasource.username =root
spring.datasource.password =root
#数据源配置(使用阿里的Druid)
spring.datasource.type =com.alibaba.druid.pool.DruidDataSource
#mybatis配置
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#mybatis.typeAliasesPackage=zilanxuan.entity.User
mybatis.mapperLocations=classpath:mapper/*.xml
#Pagehelper配置
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
#整合thymeleaf模板引擎
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
#前缀
spring.thymeleaf.prefix=classpath:/static/
#编码
spring.thymeleaf.encoding=UTF-8
#类型
spring.thymeleaf.content-type=text/html
#名称的后缀
spring.thymeleaf.suffix=.html
4、到现在就可以开始写代码了,通过前三步就把springboot+thymeleaf+mybatis的依赖环境就都配置好了,现在开始写controller层
@Controller
public class UserController {
@Autowired
private UserService userService;
/**
* 这种方式是通过thymeleaf这种方式进行分页
* @param model 使用model将数据信息传到页面
* @param user 这个user主要是做查询,根据user的字段进行查询
* @param pageNum 第几页
* @param pageSize 一页显示的记录数
* @return
*/
@RequestMapping("/index")
public String getUserList(Model model,User user,@RequestParam(defaultValue="1") Integer pageNum,@RequestParam(defaultValue="5") Integer pageSize){
model.addAttribute("pager", userService.getUsers(user,pageNum,pageSize));
return "index";
}
@RequestMapping("/dev")
public String getdev() {
return "dev";
}
/**
* 这种方式是easyui方式进行分页的,
* 这种方式简单方便,它会发送接口两个参数page(第几页)和rows(一页显示几条数据)
* 返回的时候需要两个参数total(总记录数)和rows(一页中的数据,类型为List<T>)
* 推荐
* @param user
* @param page
* @param rows
* @return
*/
@ResponseBody
@RequestMapping("/d")
public Map<String,Object> getusers(User user,@RequestParam(defaultValue="1") Integer page,@RequestParam(defaultValue="5") Integer rows){
Map<String,Object> map = new HashMap<String,Object>();
Pager<User> pager = userService.getUsers(user,page,rows);
map.put("total", pager.getTotalRecord());
map.put("rows", pager.getDataList());
return map;
}
}
5、写service层
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
public Pager<User> getUsers(User user,Integer pageNum,Integer pageSize) {
//自己做的查询,查询总共有多少条记录数
Integer sumData = userMapper.getSize();
//使用pagehelper进行分页,把两个参数传入,简单吧,哈哈
PageHelper.startPage(pageNum, pageSize);
//查询所有数据,这块代码需要和上面pagehelper的代码挨着,
//否则会出现进行没有分页的情况,
//挨着上面代码,pagehelper会自动把分页数据返回来,不然就把所有的数据都给你返回来了
//比如说pageNum=1,pageSize=5,有上面一行代码,虽然你查的是所以数据,但是它
//只会给你返回5条数据,所有我才第一行自己写了一个查询总共有多少条记录
List<User> users = userMapper.findAllUser(user);
Pager<User> us = new Pager<User>();
Integer totalRecord = sumData;
Integer totalPage = totalRecord/pageSize;
us.setDataList(users);
us.setPageSize(pageSize);
us.setCurrentNum(pageNum);
us.setTotalPage(totalRecord%pageSize==0?totalPage:totalPage+1);
us.setTotalRecord(totalRecord);
us.setFirst(pageNum==1?true:false);
us.setLast(pageNum==totalPage?true:false);
return us;
}
}
6、写DAO层以及写mapper.xml
public interface UserMapper {
List<User> findAllUser(@Param(value="user") User user);
Integer getSize();
}
这是说一下我的UserMapper.xml文件写在了resource下创建的staitc文件夹下
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.zilanxuan.mapper.UserMapper">
<sql id="j">
a.id AS "id",
a.readname AS "readname",
a.password AS "password",
a.tel AS "tel",
a.username AS "username"
</sql>
<sql id="b">
</sql>
<select id="findAllUser" resultType="cn.zilanxuan.entity.User">
select
<include refid="j"></include>
from users a
<include refid="b"></include>
<where>
<!-- 查询手机号 -->
<if test="user.tel != null and user.tel != ''">
AND a.tel = #{user.tel}
</if>
<!-- 查询昵称 -->
<if test="user.readname != null and user.readname != ''">
AND a.readname LIKE concat('%',#{user.readname},'%')
</if>
<!-- 查询用户名 -->
<if test="user.username != null and user.username != ''">
AND a.username LIKE concat('%',#{user.username},'%')
</if>
</where>
</select>
<select id="getSize" resultType="int">
select count(*) from users
</select>
</mapper>
7、使用thymeleaf进行分页的页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>thymeleaf方式获取数据及分页</title>
</head>
<body>
<h1>-----------(thymeleaf方式获取数据及分页)-------------</h1>
<h1>用户列表</h1>
<div>
<table>
<thead>
<tr>
<td>ID</td>
<td>昵称</td>
<td>密码</td>
<td>用户名</td>
<td>手机号</td>
</tr>
</thead>
<tbody>
<tr th:each="info : ${pager.dataList}" >
<td th:text="${info.id}"></td>
<td th:text="${info.readname}"></td>
<th th:text="${info.password}"></th>
<th th:text="${info.username}"></th>
<th th:text="${info.tel}"></th>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tr>
<td><a th:href="@{/index?pageNum=1}">首页</a></td>
<td th:switch="${pager.currentNum}">
<p th:case="1"> <a th:href="@{/index?pageNum=1}">上一页</a></p>
<p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum-1})}">上一页</a></p>
</td>
<td th:switch="${pager.currentNum}">
<p th:case="${pager.totalPage}"><a th:href="@{/index(pageNum=${pager.totalPage})}">下一页</a></p>
<p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum+1})}">下一页</a></p>
</td>
<td><a th:href="@{/index(pageNum=${pager.totalPage})}">尾页</a></td>
</tr>
</table>
<div>
当前第<span th:text="${pager.currentNum}">1</span>页;共<span th:text="${pager.totalRecord}">10</span>条记录;共<span th:text="${pager.totalPage}">3</span>页
</div>
</div>
</body>
</html>
8、使用easyui做分页的页面代码
这是说一下easyui是一个前段框架,需要引入js/css包
easyui官方地址http://www.jeasyui.net/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用easyui方式实现分页</title>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<body>
<h1>-----------------使用easyui方式实现分页-------------------</h1>
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'http://localhost:8080/d',method:'get'">
<thead>
<tr>
<th data-options="field:'id',width:80">ID</th>
<th data-options="field:'tel',width:100">手机号</th>
<th data-options="field:'username',width:80,align:'right'">用户名</th>
<th data-options="field:'password',width:80,align:'right'">密码</th>
<th data-options="field:'readname',width:250">昵称</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
}]
});
})
</script>
</body>
</body>
</html>
到这里就结束了,祝你能有所收获