Thymeleaf 分页功能

最新推荐文章于 2024-03-25 09:32:59 发布

tj_boce_gjp

最新推荐文章于 2024-03-25 09:32:59 发布

阅读量822

点赞数

分类专栏： Thymeleaf 文章标签： thymeleaf th:onclick

本文链接：https://blog.csdn.net/gjp014/article/details/84905194

版权

Thymeleaf 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.下载
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>

<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.0.4</version>
</dependency>


<dependency>
<groupId>com.thoughtworks.xstream</groupId>
<artifactId>xstream</artifactId>
<version>1.4.9</version>
</dependency>


<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>




<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>


<div th:replace="~{thymeleaf/common/footer :: #copy-section}"></div>
<div th:insert="thymeleaf/common/footer :: copy">9999</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" />


<script th:src="@{/js/jquery-1.12.3.js}"></script>

<script type="text/javascript" th:src="@{/myhtml/bootstrap337/bootstrap.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:οnclick="'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:οnclick="'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:οnclick="'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}" [color=darkred]th:οnclick="'javascript:openPage(\''+${contactsPage.number+1}+'\',\''+${contactsPage.size}+'\')'"[/color]>后一页</a>
这块的写法

效果展现：

[img]http://dl2.iteye.com/upload/attachment/0126/2743/f3c0b5da-6c6b-3474-87a4-66e32f029935.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0126/2745/81d2e471-3d32-3c38-8412-aaadc6a60eb6.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0126/2747/25367f74-5c60-3724-af34-879d57f34bf0.png[/img]