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目录下加入如下几个文件
在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>