springboot用thymeleaf模板的paginate分页完整代码
发布时间 - 2026-01-11 02:34:46 点击率:次本文根据一个简单的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));
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">
<head th:fragment="page">
<link rel="stylesheet" th:href="@{/css/pagestyle.css}" rel="external nofollow" />
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.paginate.js}"></script>
<script th:inline="javascript">
(function($) {
/*<![CDATA[*/
var count=[[${page.pagecount}]];
var start=[[${page.pageon}]];
/*]]>*/
var url=$("#page").attr('url');
var displaycnt=count>10?10:count;
fenye(count,start,url,displaycnt);
})(jQuery);
function fenye(count,start,url,displaycnt){
/*<![CDATA[*/
if(count<2)
return;
/*]]>*/
$("#page").paginate({
count : count,
start : start,
display : displaycnt,
border : true,
border_color : '#fff',
text_color : '#fff',
background_color : 'pink',
border_hover_color : '#ccc',
text_hover_color : '#000',
background_hover_color : '#fff',
images : true,
mouse : 'press',
onChange: function(page_index) {
var tourl;
/*<![CDATA[*/
if(url.indexOf('?')>0)
tourl=url+'&pageon='+page_index;
else
tourl=url+'?pageon='+page_index;
window.location.href=tourl;
/*]]>*/
}
});
};
</script>
</head>
</html>
接下来就是引用分页插件了。
在templates目录下建立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>
<p th:each="user:${list}">
<tr>
<td th:text="${user.id}">ID</td>
<td th:text="${user.name}">姓名</td>
<td th:text="${user.password}">密码</td>
</tr>
</p>
</table>
<div id="page" url="/userlist" ></div>
<div th:replace="page :: page"></div>
</div>
</body>
</html>
可以看到 引用分页的代码 只有两句,是不是很好用
<div id="page" url="/userlist" ></div> <div th:replace="page :: page"></div>
# spring
# boot
# 分页
# SpringBoot使用thymeleaf实现前端表格
# SpringBoot使用thymeleaf实现一个前端表格方法详解
# SpringBoot+thymeleaf+ajax实现局部刷新详情
# 在SpringBoot中配置Thymeleaf的模板路径方式
# springboot+thymeleaf打包成jar后找不到静态资源的坑及解决
# SpringBoot引入Thymeleaf的实现方法
# springboot中thymeleaf模板使用详解
# springboot 中 thymeleaf 常用的语法完整实例
# 为例
# 目录下
# 几个
# 记录器
# 不多
# 不是很
# 所需
# 半天
# 可以看到
# 两句
# 好用
# 建立一个
# 再到
# 先看
# 用户列表
# 不足之处
# cache
# text
# false
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践
如何获取免费开源的自助建站系统源码?
Claude怎样写约束型提示词_Claude约束提示词写法【教程】
ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法
武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?
网站制作软件有哪些,制图软件有哪些?
Laravel如何创建和注册中间件_Laravel中间件编写与应用流程
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
如何获取上海专业网站定制建站电话?
Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】
如何在VPS电脑上快速搭建网站?
中国移动官方网站首页入口 中国移动官网网页登录
网站制作企业,网站的banner和导航栏是指什么?
如何撰写建站申请书?关键要点有哪些?
Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程
*服务器网站为何频现安全漏洞?
Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践
lovemo网页版地址 lovemo官网手机登录
Laravel如何优化应用性能?(缓存和优化命令)
软银砸40亿美元收购DigitalBridge 强化AI资料中心布局
想要更高端的建设网站,这些原则一定要坚持!
HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】
韩国服务器如何优化跨境访问实现高效连接?
php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】
Laravel如何记录自定义日志?(Log频道配置)
南京网站制作费用,南京远驱官方网站?
Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出
如何在阿里云虚拟主机上快速搭建个人网站?
高防服务器租用如何选择配置与防御等级?
ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】
详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)
如何生成腾讯云建站专用兑换码?
音响网站制作视频教程,隆霸音响官方网站?
Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】
Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法
laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法
百度输入法ai组件怎么删除 百度输入法ai组件移除工具
Laravel如何处理和验证JSON类型的数据库字段
php静态变量怎么调试_php静态变量作用域调试技巧【解答】
Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】
C#如何调用原生C++ COM对象详解
Android实现代码画虚线边框背景效果
Laravel怎么解决跨域问题_Laravel配置CORS跨域访问
如何用AWS免费套餐快速搭建高效网站?
如何在香港服务器上快速搭建免备案网站?
如何构建满足综合性能需求的优质建站方案?
Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】
Laravel怎么实现验证码(Captcha)功能
Laravel用户密码怎么加密_Laravel Hash门面使用教程
,网页ppt怎么弄成自己的ppt?

