Thymeleaf 分页功能 博客分类： Thymeleaf thymeleafth:onclick
程序员文章站
2024-03-17 12:46:58
...
1.下载
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
<!-- layout 使用 -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.0.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.thoughtworks.xstream/xstream -->
<dependency>
<groupId>com.thoughtworks.xstream</groupId>
<artifactId>xstream</artifactId>
<version>1.4.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
2.编写java 类
@Controller
@RequestMapping(value="/leaf/")
public class ThymeleafController extends BaseController{
@RequestMapping(value = "listPage")
public ModelAndView listjson(DemoVo demoVo) {
ModelAndView mav = new ModelAndView("thymeleaf/list");
List<DemoPo> list = new ArrayList<DemoPo>();
for(int i=demoVo.getPage()*10 ;i<(demoVo.getPage()+1)*10;i++){
DemoPo po = new DemoPo();
po.setDid(i);
po.setProductid(i+"product"+i);
po.setPstatus("status");
po.setUnitcost("cost"+i);
list.add(po);
}
List<DemoPo> selectList = new ArrayList<DemoPo>();
for(int i=0 ;i<10;i++){
DemoPo po1 = new DemoPo();
po1.setDid(i);
po1.setProductid(i+"product"+i);
po1.setPstatus("status");
po1.setUnitcost("cost"+i);
selectList.add(po1);
}
FootBar footBar = new FootBar(43,demoVo.getRows());
if(demoVo.getPage() >=0) {
footBar.setNumber(demoVo.getPage());
}
mav.addObject("demoVo",demoVo);
mav.addObject("page",list);
mav.addObject("list",selectList);
mav.addObject("contactsPage",footBar);
return mav;
}
}
界面代码：list.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:insert="thymeleaf/common/common_header :: common_header(~{::title},~{::link})">
<title>渤海交易所</title>
<link rel="stylesheet" th:href="@{/myhtml/bootstrap337/css/bootstrap.css}" />
</head>
<body>
<!-- 通过 tag名称 引用 -->
<!--<header th:replace="thymeleaf/common/top_header :: header"></header>-->
<!--<div th:fragment="id_fragment"></div>-->
<form id="iform" th:action="@{listPage.html}" th:method="post" th:object="${demoVo}">
<table border="1">
<tr>
<th>产品id</th>
<th>产品编号</th>
<th>单位</th>
<th>操作</th>
</tr>
<tr>
<td><select th:field="*{unitcost}" th:remove="all-but-first">
<option th:each="paymentMethod : ${list}"
th:value="${paymentMethod.did}" th:text="${paymentMethod.productid}">Credit card</option>
</select></td>
<td><input type="text" name="productid" value="" th:value="*{productid}"/></td>
<td><input th:field="*{attr1}" type="radio" name="attr1" value="0"/> 重量
<input th:field="*{attr1}" type="radio" name="attr1" value="1"/> 车</td>
<td><input type="submit" value="查询"/></td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>动物名称</th>
<th>数量</th>
<th>备注</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="obj, objStat: ${page}">
<td th:text="${objStat.count}">1</td>
<td th:text="${obj.productid}">大马猴</td>
<td th:text="${obj.did}">10</td>
<td th:text="${obj.pstatus}">机灵古怪，俏皮活泼</td>
</tr>
</tbody>
</table>
<div th:replace="thymeleaf/common/footer::pagefoot(${contactsPage})">page</div>
</form>
<!-- 通过 id 引用 -->
<div th:replace="~{thymeleaf/common/footer :: #copy-section}"></div>
<div th:insert="thymeleaf/common/footer :: copy">9999</div>
<!--<div th:insert="thymeleaf/common/footer::frag(${po.listprice},${po})">000</div>-->
</body>
</html>
引入head头代码：common_header.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--<link rel="shortcut icon" th:href="@{/static/img/favicon.gif}" type="image/gif" />-->
<!--<link rel="stylesheet" th:href="@{/myhtml/bootstrap337/css/bootstrap.css}" />-->
<script th:src="@{/js/jquery-1.12.3.js}"></script>
<script type="text/javascript" th:src="@{/myhtml/bootstrap337/bootstrap.js}"></script>
<!-- Common styles and scripts -->
<!--<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">-->
<!--<link rel="shortcut icon" th:href="@{/images/favicon.ico}">-->
<!--<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>-->
<th:block th:replace="${links}"/>
</head>
</html>
分页代码块footer.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<div class="table-pagination" th:fragment="pagefoot(contactsPage)">
<input type="hidden" name="page" id="page" value="0" >
<input type="hidden" name="size" id="size" value="10" />
<script>
function openPage(page,size) {
$("#page").val(page);
$("#size").val(size);
$("form").submit();
}
</script>
<ul class="pagination">
<li th:class="${contactsPage.number eq 0} ? 'disabled' : ''">
<a th:if="${not contactsPage.firstPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number-1}+'\',\''+${contactsPage.size}+'\')'">前一页</a>
<a th:if="${contactsPage.firstPage}" href="javascript:void(0);">前一页</a>
</li>
<li th:each="pageNo : ${#numbers.sequence(contactsPage.start, contactsPage.end)}" th:class="${contactsPage.number eq pageNo}? 'active' : ''">
<a th:if="${contactsPage.number eq pageNo}" href="javascript:void(0);">
<span th:text="${pageNo + 1}"></span>
</a>
<a th:if="${not (contactsPage.number eq pageNo)}" th:onclick="'javascript:openPage(\''+${pageNo}+'\',\''+${contactsPage.size}+'\')'">
<span th:text="${pageNo + 1}"></span>
</a>
</li>
<li th:class="${contactsPage.number + 1 ge contactsPage.totalPages} ? 'disabled' : ''">
<a th:if="${not contactsPage.lastPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number+1}+'\',\''+${contactsPage.size}+'\')'">后一页</a>
<a th:if="${contactsPage.lastPage}" href="javascript:void(0);">后一页</a>
</li>
</ul>
</div>
<div th:fragment="frag(onevar,test)">
<p th:text="${onevar}">...</p>
<p th:text="${test.listprice}">...</p>
</div>
</html>
注意：
<a th:if="${not contactsPage.lastPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number+1}+'\',\''+${contactsPage.size}+'\')'">后一页</a>
这块的写法
效果展现：
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
<!-- layout 使用 -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.0.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.thoughtworks.xstream/xstream -->
<dependency>
<groupId>com.thoughtworks.xstream</groupId>
<artifactId>xstream</artifactId>
<version>1.4.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
2.编写java 类
@Controller
@RequestMapping(value="/leaf/")
public class ThymeleafController extends BaseController{
@RequestMapping(value = "listPage")
public ModelAndView listjson(DemoVo demoVo) {
ModelAndView mav = new ModelAndView("thymeleaf/list");
List<DemoPo> list = new ArrayList<DemoPo>();
for(int i=demoVo.getPage()*10 ;i<(demoVo.getPage()+1)*10;i++){
DemoPo po = new DemoPo();
po.setDid(i);
po.setProductid(i+"product"+i);
po.setPstatus("status");
po.setUnitcost("cost"+i);
list.add(po);
}
List<DemoPo> selectList = new ArrayList<DemoPo>();
for(int i=0 ;i<10;i++){
DemoPo po1 = new DemoPo();
po1.setDid(i);
po1.setProductid(i+"product"+i);
po1.setPstatus("status");
po1.setUnitcost("cost"+i);
selectList.add(po1);
}
FootBar footBar = new FootBar(43,demoVo.getRows());
if(demoVo.getPage() >=0) {
footBar.setNumber(demoVo.getPage());
}
mav.addObject("demoVo",demoVo);
mav.addObject("page",list);
mav.addObject("list",selectList);
mav.addObject("contactsPage",footBar);
return mav;
}
}
界面代码：list.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:insert="thymeleaf/common/common_header :: common_header(~{::title},~{::link})">
<title>渤海交易所</title>
<link rel="stylesheet" th:href="@{/myhtml/bootstrap337/css/bootstrap.css}" />
</head>
<body>
<!-- 通过 tag名称 引用 -->
<!--<header th:replace="thymeleaf/common/top_header :: header"></header>-->
<!--<div th:fragment="id_fragment"></div>-->
<form id="iform" th:action="@{listPage.html}" th:method="post" th:object="${demoVo}">
<table border="1">
<tr>
<th>产品id</th>
<th>产品编号</th>
<th>单位</th>
<th>操作</th>
</tr>
<tr>
<td><select th:field="*{unitcost}" th:remove="all-but-first">
<option th:each="paymentMethod : ${list}"
th:value="${paymentMethod.did}" th:text="${paymentMethod.productid}">Credit card</option>
</select></td>
<td><input type="text" name="productid" value="" th:value="*{productid}"/></td>
<td><input th:field="*{attr1}" type="radio" name="attr1" value="0"/> 重量
<input th:field="*{attr1}" type="radio" name="attr1" value="1"/> 车</td>
<td><input type="submit" value="查询"/></td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>动物名称</th>
<th>数量</th>
<th>备注</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="obj, objStat: ${page}">
<td th:text="${objStat.count}">1</td>
<td th:text="${obj.productid}">大马猴</td>
<td th:text="${obj.did}">10</td>
<td th:text="${obj.pstatus}">机灵古怪，俏皮活泼</td>
</tr>
</tbody>
</table>
<div th:replace="thymeleaf/common/footer::pagefoot(${contactsPage})">page</div>
</form>
<!-- 通过 id 引用 -->
<div th:replace="~{thymeleaf/common/footer :: #copy-section}"></div>
<div th:insert="thymeleaf/common/footer :: copy">9999</div>
<!--<div th:insert="thymeleaf/common/footer::frag(${po.listprice},${po})">000</div>-->
</body>
</html>
引入head头代码：common_header.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--<link rel="shortcut icon" th:href="@{/static/img/favicon.gif}" type="image/gif" />-->
<!--<link rel="stylesheet" th:href="@{/myhtml/bootstrap337/css/bootstrap.css}" />-->
<script th:src="@{/js/jquery-1.12.3.js}"></script>
<script type="text/javascript" th:src="@{/myhtml/bootstrap337/bootstrap.js}"></script>
<!-- Common styles and scripts -->
<!--<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">-->
<!--<link rel="shortcut icon" th:href="@{/images/favicon.ico}">-->
<!--<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>-->
<th:block th:replace="${links}"/>
</head>
</html>
分页代码块footer.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<div class="table-pagination" th:fragment="pagefoot(contactsPage)">
<input type="hidden" name="page" id="page" value="0" >
<input type="hidden" name="size" id="size" value="10" />
<script>
function openPage(page,size) {
$("#page").val(page);
$("#size").val(size);
$("form").submit();
}
</script>
<ul class="pagination">
<li th:class="${contactsPage.number eq 0} ? 'disabled' : ''">
<a th:if="${not contactsPage.firstPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number-1}+'\',\''+${contactsPage.size}+'\')'">前一页</a>
<a th:if="${contactsPage.firstPage}" href="javascript:void(0);">前一页</a>
</li>
<li th:each="pageNo : ${#numbers.sequence(contactsPage.start, contactsPage.end)}" th:class="${contactsPage.number eq pageNo}? 'active' : ''">
<a th:if="${contactsPage.number eq pageNo}" href="javascript:void(0);">
<span th:text="${pageNo + 1}"></span>
</a>
<a th:if="${not (contactsPage.number eq pageNo)}" th:onclick="'javascript:openPage(\''+${pageNo}+'\',\''+${contactsPage.size}+'\')'">
<span th:text="${pageNo + 1}"></span>
</a>
</li>
<li th:class="${contactsPage.number + 1 ge contactsPage.totalPages} ? 'disabled' : ''">
<a th:if="${not contactsPage.lastPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number+1}+'\',\''+${contactsPage.size}+'\')'">后一页</a>
<a th:if="${contactsPage.lastPage}" href="javascript:void(0);">后一页</a>
</li>
</ul>
</div>
<div th:fragment="frag(onevar,test)">
<p th:text="${onevar}">...</p>
<p th:text="${test.listprice}">...</p>
</div>
</html>
注意：
<a th:if="${not contactsPage.lastPage}" th:onclick="'javascript:openPage(\''+${contactsPage.number+1}+'\',\''+${contactsPage.size}+'\')'">后一页</a>
这块的写法
效果展现：
