Thymeleaf 分页功能 -

gjp014

浏览: 271310 次
性别:
来自: 天津

最近访客更多访客>>

Cyen

maxer025

bing_it

dluccoo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Thymeleaf 分页功能

博客分类：

Thymeleaf

thymeleaf th:onclick

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: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>
这块的写法

效果展现：