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&amp;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?