欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

springboot用thymeleaf模板的paginate分页完整代码

程序员文章站 2023-12-20 08:10:40
本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正); 先看java部分 pom.xml...

本文根据一个简单的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目录下加入如下几个文件

springboot用thymeleaf模板的paginate分页完整代码

在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>

上一篇:

下一篇: