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

曾经终败给现在 2022-04-05 08:16 413阅读 0赞

**附言：**  
自己在使用springboot集成thymeleaf时，写一个页面显示数据的小demo，同时也需要分页功能，无奈自己css差，找了好多网上资料，这时就想到了jquery分页插件，如下附件包含css样式文件

**jquery插件附件：**【插件来源于：[http://www.jq22.com/message34】][http_www.jq22.com_message34]  
[https://download.csdn.net/download/qiaziliping/10843274][https_download.csdn.net_download_qiaziliping_10843274]

**附件包含三个文件**： jquery-1.3.2.js，jquery.paginate.js，jquery.paginate.js

**项目的demo如下图**：  
*静态资源默认放在 classpath:static文件夹下面*  
![在这里插入图片描述][20181211155848787.png]

### 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 ">
    
    <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^)/ ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpYXppbGlwaW5n_size_16_color_FFFFFF_t_70]

[http_www.jq22.com_message34]: http://www.jq22.com/message34%E3%80%91
[https_download.csdn.net_download_qiaziliping_10843274]: https://download.csdn.net/download/qiaziliping/10843274
[20181211155848787.png]: /images/20220405/78ee463f1a274bde93966e7b89469c7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpYXppbGlwaW5n_size_16_color_FFFFFF_t_70]: /images/20220405/8b1fda0e18754f08912f6812582ff815.png