大家好，欢迎来到IT知识分享网。
附言：
自己在使用springboot集成thymeleaf时，写一个页面显示数据的小demo，同时也需要分页功能，无奈自己css差，找了好多网上资料，这时就想到了jquery分页插件，如下附件包含css样式文件
jquery插件附件：【插件来源于：http://www.jq22.com/message34】
https://download.csdn.net/download/qiaziliping/10843274
附件包含三个文件： jquery-1.3.2.js，jquery.paginate.js，jquery.paginate.js
项目的demo如下图：
静态资源默认放在 classpath:static文件夹下面
1、pom.xml 引入thymeleaf的jar包
<properties>
<pagehelper-spring-boot.version>1.2.5</pagehelper-spring-boot.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 后台分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pagehelper-spring-boot.version}</version>
</dependency>
</dependencies>
2、application.properties 文件配置thymeleaf的参数
#thymeleaf start
#模板文件默认配置目录
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
#thymeleaf end
3、java代码
// 3.1 用户对象
@Data
public class SysUser implements Serializable {
private Long id;
/** 用户名 */
private String username;
/** 密码 */
private String password;
/** 昵称 */
private String nickname;
/** 性别：0女，1男 */
private Integer sex;
/** 手机号码 */
private String mobile;
/** 邮箱 */
private String email;
/** 头像地址 */
private String imagePathUrl;
private Integer status;
private String remark;
private String createUserId;
/** */
private Date createTime;
}
// 3.2 controller类的接口
/** * pageNum 第几页 */
@RequestMapping(value="/getListPage")
public String getListPage(ModelMap result, Model model, @RequestParam(value = "pageNum") String pageNum) {
Map<String,Object> condition = new HashMap<>();
condition.put("pageNum", pageNum);
condition.put("pageSize", 10);
// Page<SysUser> 是PageHelper插件的对象
Page<SysUser> pageData = sysUserService.getIndex(condition);
model.addAttribute("sysuser", pageData.getResult());
Map<String, Object> page = new HashMap<String,Object>();
page.put("pageCount", 105); // 写死的总页数
page.put("pageNum", pageNum);
model.addAttribute("page", page);
return "sysuser";
}
// 3.3 service实现类的方法,DAO层和mybatis的sql文件就忽略了，就是获取一个列表而已
@Override
public Page<SysUser> getIndex(Map<String, Object> condition) {
int pageNum =Integer.parseInt(String.valueOf(condition.get("pageNum")));
int pageSize = Integer.parseInt(String.valueOf(condition.get("pageSize")));
Page<SysUser> page = PageHelper.startPage(pageNum,pageSize);
sysUserDAO.getIndex(condition);
return page;
}
4、html的thymeleaf页面
-----4.1 page.html的代码如下--------
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml " xmlns:th="http://www.thymeleaf.org ">
<!-- 定一个碎片名称为myPage -->
<head th:fragment="myPage">
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<script type="text/javascript" th:src="@{/js/jquery-1.3.2.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.paginate.js}"></script>
<script th:inline="javascript"> $(document).ready(function(){
var count = [[${
page.pageCount}]]; var start = [[${
page.pageNum}]]; var url = $("#page").attr('url'); //获取请求的url if(count <= 1) {
$("#page").hide(); } else {
$("#page").show(); } $("#page").paginate({
count : count,//总页数 start : start,//当前页码 display : 10, //设置每页显示页码数 border : true, border_color : '#B0B0CC',//border颜色 text_color : '#5C6C90',//字体颜色 background_color : '#FAFFFF', border_hover_color : '#000E53', text_hover_color : '#fff', background_hover_color : '#2F6BA7', images : false, mouse : 'press', onChange: function(page_index) {
debugger; alert("点击的页码》：" +page_index); jumpUrl(page_index,url); //这里如果使用异步刷新 直接调用异步方法如 ajaxQuery（page_index）,注意使用异步方法后重新初始化插件 } }); }); function jumpUrl(curPage,url) {
alert(curPage+"----"+url); var tourl; if(url.indexOf('?')>0) tourl = url+'&pageon='+curPage; else tourl = url+'?pageon='+curPage; window.location.href = tourl; } </script>
</head>
</html>
-----4.2 sysuser.html用户列表页面的代码如下--------
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org ">
<head>
<meta charset="UTF-8" />
<title>sysuser.html</title>
</head>
<body>
<h2>用户列表</h2>
<div style="width: 1000px;">
<table border="1" width="100%" cellpadding="0" cellspacing="1" bgcolor="#ACDDEC">
<tr>
<td >ID</td>
<td>姓名</td>
<td>密码</td>
<td>手机</td>
</tr>
<p th:each="user:${sysuser}">
<tr>
<td th:text="${user.id }"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td th:text="${user.mobile}"></td>
</tr>
</p>
</table>
<!-- 引入分页 -->
<div id="page" url="/sysuser/getListPage" ></div>
<div th:replace="page :: myPage"></div>
</div>
</body>
</html>
5、页面显示，主要看分页的效果就行了，(^o^)/
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25925.html
