`

Thymeleaf 分页功能

阅读更多
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"/>&nbsp;&nbsp;重量
                <input th:field="*{attr1}" type="radio" name="attr1" value="1"/>&nbsp;&nbsp;车</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">
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

<footer th:fragment="copy">
    &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>
这块的写法


效果展现:









  • 大小: 25.5 KB
  • 大小: 23.1 KB
  • 大小: 24.5 KB
分享到:
评论

相关推荐

    springboot+hibernate+thymeleaf分页增删改查demo

    在分页功能中,Thymeleaf可以接收并显示由后端传递的分页参数,如当前页码、总页数等。同时,Thymeleaf的条件语句和迭代语句可以用于处理增删改查操作的表单验证和结果显示。 项目的运行说明通常会包含以下步骤: 1...

    Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询(前后端都有).zip

    Mybatis-Plus的内置分页功能在后端实现了高效的数据分页查询,允许我们轻松地处理大量数据。在项目中,后端的分页逻辑是通过调用Mybatis-Plus的Page对象及其相关API实现的,无需编写复杂的SQL语句。 **Thymeleaf** ...

    Springboot整合Hibernate thymeleaf,添删改查,分页查询等,单元测试,亲测百分之白可运行

    总的来说,这个项目提供了完整的Spring Boot、Hibernate、JPA和Thymeleaf整合示例,涵盖了基础的Web开发功能,并且经过测试确保可运行,对于初学者来说是很好的学习资源。通过这个项目,开发者可以深入理解这些技术...

    分页功能.zip

    本项目通过SpringBoot整合Mybatis和Thymeleaf,实现了高效、灵活的分页功能。以下是关于这个主题的详细知识点: 1. **SpringBoot**: - SpringBoot是基于Spring框架构建的快速开发工具,简化了Spring应用的初始...

    springboot+thymeleaf+pagehelper+easyui分页

    在本项目中,我们主要探讨的是如何利用Spring Boot、Thymeleaf、PageHelper和EasyUI这四个核心技术来实现一个高效、便捷的分页功能。下面将分别介绍这些技术及其在项目中的应用。 首先,Spring Boot是基于Spring...

    springboot+jpa+thymeleaf实现增删改查分页查询

    在本项目中,我们主要利用Spring Boot的便捷性,结合JPA(Java Persistence API)的ORM能力以及Thymeleaf的模板引擎,构建一个具备基本CRUD(创建、读取、更新、删除)功能和分页查询的Web应用。下面将详细讲解这些...

    SpringBoot+thymeleaf+MyBatis+MySQL实现查询功能

    在IT行业中,构建Web应用程序是常见的任务,而Spring Boot、Thymeleaf、MyBatis和MySQL这四个组件是构建高效、简洁后端服务的...在实际项目中,还可以根据具体需求添加分页、排序、过滤等功能,进一步提升用户体验。

    Spring Boot 2.0 + Thymeleaf模板+简单增删改查分页

    在本项目中,我们主要探讨的是如何利用Spring Boot 2.0.4版本与Thymeleaf模板引擎来实现一个包含基本CRUD操作(创建、读取、更新、删除)和分页功能的Web应用程序。Spring Boot是Spring框架的一个简化版,它提供了...

    Thymeleaf的图书馆管理系统Demo模版

    3. 分页功能:Thymeleaf可以通过条件判断(`th:if`、`th:unless`)和迭代(`th:each`)实现分页链接的动态生成。 4. 权限控制:Thymeleaf可以配合Spring Security进行权限检查,例如,使用`th:if`检查用户是否已...

    spring Boot+mybatis-plus+Thymeleaf+MySql增删改查(含有分页+雪花Id)

    在这个项目中,我们将探讨如何使用这些技术实现一个简单的增删改查(CRUD)应用,并结合分页功能和雪花Id进行更高效的操作。 1. **Spring Boot 配置** - 创建 Spring Boot 项目并添加相关依赖:`spring-boot-...

    spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面(看评论酌情下载)

    在`application.properties`或`application.yml`中,设置Thymeleaf 的前缀和后缀,指定模板文件的路径,如:`spring.thymeleaf.prefix=classpath:/templates/`,`spring.thymeleaf.suffix=.html`。 然后,创建HTML...

    Java实现分页功能

    在Java EE应用开发中,分页功能是必不可少的,它能有效地提高用户体验,尤其是在处理大量数据时。本教程将引导你了解如何使用Spring MVC和MyBatis框架来实现这一功能。Spring MVC作为控制层,负责处理请求和响应,而...

    SSM(Spring+mybatis+Springmvc)+maven+Ajax实现分页功能

    在IT行业中,分页功能是Web应用中不可或缺的一部分,它能有效地管理大量数据,提高用户体验。本项目基于SSM(Spring、SpringMVC和MyBatis)框架,结合Maven构建工具以及Ajax技术,实现了动态分页的效果。下面将详细...

    Spring集成MyBatis 通用Mapper以及 pagehelper分页插件

    通用Mapper和PageHelper则是MyBatis生态中的实用工具,可以进一步简化数据库操作和实现高效的分页功能。下面将详细阐述这些知识点。 首先,Spring是一个全功能的开源应用框架,它提供了依赖注入(Dependency ...

    springboot用thymeleaf模板的paginate分页完整代码

    Spring Boot 使用 Thymeleaf 模板的 Paginate 分页完整代码 Spring Boot 是一个流行的 Java 框架,用于构建 ...通过本文,读者可以了解如何使用 Spring Boot 和 Thymeleaf 模板来构建 Web 应用程序,并实现分页功能。

    StringBoot+Thymeleaf 系统查询工具

    5. **分页与排序**:内置分页和排序功能,可以根据查询结果的大小和用户需求进行数据的分页展示,同时支持自定义排序规则。 6. **查询结果展示**:提供表格形式的查询结果展示,并支持导出为Excel、CSV等格式,方便...

    springboot+mybatis+thymeleaf杂货铺

    PageHelper是MyBatis的一个插件,提供了强大的分页功能。它可以自动解析SQL,添加分页参数,生成正确的分页结果。在本项目中,通过PageHelper,开发者可以轻松地实现数据查询的分页展示,提高用户体验,同时也优化了...

    基于SpringBoot+Thymeleaf +mybatisPlus实现的个人博客系统 毕业设计

    1.2 功能介绍 本博客系统基于 SpringBoot 2.x,支持快速开发,部署,服务器采用tomcat。 数据库采用常见的关系型数据库Mysql,ORM框架采用JPA 模板引擎采用Thymeleaf (对于为何使用Thymeleaf 作为模板引擎,可以...

    java分页实现大全

    - MyBatis PageHelper插件:提供更便捷的分页功能,支持自动计算LIMIT和OFFSET,同时支持物理分页和逻辑分页。 3. **Spring Data JPA分页**: - `Pageable`接口:包含页码、每页大小和排序信息,可用于查询方法的...

    IntelliJ IDEA下SpringBoot+Maven+JPA+Thymeleaf整合实现增删改查及分页入门项目实例.zip

    SpringBoot作为核心框架,Maven作为项目构建工具,JPA(Java Persistence API)作为持久层解决方案,以及Thymeleaf作为视图层模板引擎,实现了基本的增删改查(CRUD)功能和分页显示。下面将详细解析这个项目中的...

Global site tag (gtag.js) - Google Analytics