springboot用thymeleaf模板的paginate分页(类似博客园分页)
本文根据一个简单的user表为例，展示 springboot集成mybatis，再到前端分页完整代码；
先看java部分
pom.xml 加入
<!--支持 Web 应用开发，包含 Tomcat 和 spring-mvc。 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--Mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.8</version>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.2</version>
</dependency>
<!-- mybatis pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>3.6.3</version>
</dependency>
<!--Mysql / DataSource-->
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-jdbc</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--springboot 集成Mybatis所需jar配置 end-->
application.properties文件
spring.datasource.platform=mysql spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8 spring.datasource.username=root spring.datasource.password=root spring.datasource.driverClassName=com.mysql.jdbc.Driver # Advanced configuration... spring.datasource.max-active=50 spring.datasource.max-idle=6 spring.datasource.min-idle=2 spring.datasource.initial-size=6 #create table spring.jpa.hibernate.ddl-auto=validate spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.cache=false
启动类 Application.java
@SpringBootApplication @MapperScan("com.boot.mapper") public class Application { //定义一个全局的记录器，通过LoggerFactory获取 private final static Logger logger = LoggerFactory.getLogger(Application.class); //----------------------------mybaits配置start------------------------------------------- //DataSource @Bean @ConfigurationProperties(prefix="spring.datasource") public DataSource dataSource() { return new org.apache.tomcat.jdbc.pool.DataSource(); } //SqlSessionFactory @Bean public SqlSessionFactory sqlSessionFactoryBean() throws Exception { SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean(); sqlSessionFactoryBean.setDataSource(dataSource()); PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver(); sqlSessionFactoryBean.setMapperLocations(resolver.getResources("classpath:mapper/*.xml")); return sqlSessionFactoryBean.getObject(); } @Bean public PlatformTransactionManager transactionManager() { return new DataSourceTransactionManager(dataSource()); } //------------------------------mybaits配置end--------------------------------- public static void main(String[] args){ System.out.println("Hello World!"); SpringApplication.run(Application.class, args); } }
以一个简单的user对象为例
private Integer id; private String name; private String password;
controller层
@RestController public class UserController { @Autowired UserService uSer; @RequestMapping("userlist") public Object userlist(@RequestParam(value="pageon",defaultValue="1")int pageon ,ModelAndView mv){ mv.addAllObjects(uSer.UserList(pageon));
mv.setViewName("userlist"); return mv; } }
service层
public Map<String, Object> UserList(int pageon) { // TODO Auto-generated method stub Map<String,Object> map=new HashMap<String, Object>(); Page page=new Page(pageon); page.setRowcountAndCompute(userMapper.selectPageListCount(null)); map.put("page", page); map.put("list", userMapper.selectPageList(map)); return map; }
UserMapper.xml
<select id="selectPageList" parameterType="java.util.Map" resultMap="BaseResultMap" > select id, name, password from user order by id limit #{page.start},#{page.row} </select> <select id="selectPageListCount" parameterType="java.util.Map" resultType="int" > select count(1) from user </select>
到此时后台代码结束
附加个page工具类
package com.boot.utils; import java.io.Serializable; public class Page implements Serializable { /** * */ private static final long serialVersionUID = 1L; public int getPageon() { return pageon; } public void setPageon(int pageon) { this.pageon = pageon; } public int getRowcount() { return rowcount; } public void setRowcount(int rowcount) { this.rowcount = rowcount; } public int getPagecount() { return pagecount; } public void setPagecount(int pagecount) { this.pagecount = pagecount; } public int getRow() { return row; } public void setRow(int row) { this.row = row; } public Page(int pageon, int row, int rowcount) { pageNumber = 11; this.pageon = pageon; this.row = row; this.rowcount = rowcount; compute(); } public Page(int pageon, int row) { pageNumber = 11; this.pageon = pageon; this.row = row; } public Page(int pageon) { pageNumber = 11; this.pageon = pageon; } public Page() { pageNumber = 11; } public int getPageNumber() { return pageNumber; } public void setPageNumber(int pageNumber) { this.pageNumber = pageNumber; } public void compute() { if (rowcount <= 0) return; if (row <= 0) row = 10; pagecount = rowcount % row != 0 ? rowcount / row + 1 : rowcount / row; if (pageon > pagecount) pageon = pagecount; if (pageon < 1) pageon = 1; start = (pageon - 1) * row; end = pageon * row; if (end > rowcount) end = rowcount; } public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getEnd() { return end; } public void setEnd(int end) { this.end = end; } public void setRowcountAndCompute(int rowcount) { this.rowcount = rowcount; compute(); } protected int pageon; protected int rowcount; protected int pagecount; protected int row; protected int start; protected int end; protected int pageNumber; }
前端代码开始
statis目录下加入如下几个文件
在templates目录下建立一个前端分页工具页面 page.html,（虽然代码不多，封装这点东西花费我半天时间！！）
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <div th:fragment="page"> <div id="page"></div> <link rel="stylesheet" th:href="@{/css/style.css}" /> <script type="text/javascript" th:src="@{/js/page.js}"></script> <script th:inline="javascript">/*<![CDATA[*/ var size=[[${page.pagecount}]]; if(size>1) Pagination.Init(document.getElementById('page'), { size: size, // pages size page: [[${page.pageon}]], // selected page step: 3 // pages before and after current }); /*]]>*/ function back(page_index){ /*<![CDATA[*/ if([[${page.pageon}]]==page_index) return; var url=document.getElementById('page').parentNode.getAttribute('url');var tourl; if(url.indexOf('?')>0) tourl=url+'&pageon='+page_index; else tourl=url+'?pageon='+page_index; window.location.href=tourl; /*]]>*/ } </script> </div> </html>
创建userlist.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>用户列表</title> </head> <body> <div style="width: 1000px;" > <table style="border-width: 1px;border-style: dashed;"> <tr> <td>ID</td> <td>姓名</td> <td>密码</td> </tr> <tr th:each="user:${list}"> <td th:text="${user.id}">ID</td> <td th:text="${user.name}">姓名</td> <td th:text="${user.password}">密码</td> </tr> </table> <div th:include="page :: page" url="/userlist"></div> </div> </body> </html>
可以看到 引用分页的代码 只有一句，是不是很好用
<div th:include="page :: page" url="/userlist"></div>
分页效果图
谢谢观看
下载插件连接 (有两个插件 一个是滚动显示，一个类似 博客园分页)
https://files.cnblogs.com/files/changhai/%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6.zip
