【springboot】springboot集成 thymeleaf + jquery分页插件

最新推荐文章于 2024-05-02 21:23:35 发布

恰子李

最新推荐文章于 2024-05-02 21:23:35 发布

阅读量4.3k

点赞数

分类专栏： springboot 文章标签： springboot thymeleaf jquery分页

本文链接：https://blog.csdn.net/qiaziliping/article/details/84957251

版权

springboot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

附言：
自己在使用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^)/

在这里插入图片描述

恰子李

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【springboot】springboot集成 thymeleaf + jquery分页插件

自己在使用springboot集成thymeleaf时，写一个页面显示数据的小demo，同时也需要分页功能，无赖自己css差，找了好多网上资料，这时就想到了jquery分页插件，如下附件包含css样式文件jquery插件附件：【插件来源于：http://www.jq22.com/message34】https://download.csdn.net/download/qiaziliping/1...
复制链接

扫一扫