首先在pom.xml引入thymeleaf的依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

将上述的重复信息抽取出来存为pagination.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><body><div class="panelBar" th:fragment="pagination"><!--以下为公共部分--><div class="pages"><span>显示</span><select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"><option value="1" th:selected="${pages.numPerPage}==1">1</option><option value="3" th:selected="${pages.numPerPage}==3">3</option><option value="5" th:selected="${pages.numPerPage}==5">5</option><option value="10" th:selected="${pages.numPerPage}==10">10</option><option value="100" th:selected="${pages.numPerPage}==100">100</option><option value="150" th:selected="${pages.numPerPage}==150">150</option><option value="200" th:selected="${pages.numPerPage}==200">200</option><option value="250" th:selected="${pages.numPerPage}==250">250</option></select><span id="fleeceRecordCounts" th:text="'共有'+${pages.totalCount}+'条'"></span></div><div id="fleece_page" class="pagination"  th:attr="targetType=${pages.targetType},totalCount=${pages.totalCount},numPerPage=${pages.numPerPage},pageNumShown=${pages.pageNumShown},currentPage=${pages.currentPage}"></div></div></body>
</html>

在其他页面进行引用该公共模块时如下:

<div class="panelBar" th:replace="pagination::pagination"></div>

注意:第一个pagination为上述公共部分的文件名,第二个pagination为th:fragment的值。这样便可以解决公共部分代码的抽取。

fragment加载语法如下:

  1. templatename::selector:”::”前面是模板文件名,后面是选择器
  2. ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment
  3. templatename:只写模板文件名,则加载整个页面
<!--  语法说明  "::"前面是模板文件名,后面是选择器 -->
<div th:include="template/footer::copy"></div>
<!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment -->
<div th:include="::#thispage"></div>
<!-- 只写模板文件名,则加载整个页面 -->
<div th:include="template/footer"></div><span id="thispage">div in this page.
</span>

th:include 和 th:replace都是加载代码块内容,但是还是有所不同

  • th:include:加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
  • th:replace:替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div

公共部分如下:

<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="pagination"> the public pagination
</span>

调用

<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div>  -->
<div th:replace="pagination::pagination">2</div>

项目问题合集dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thyme相关推荐

  1. 高级信息系统项目管理(高项 软考)原创论文项目背景合集

    以下为原创的高项论文项目背景合集5篇,建议自己以此为基础,再多多打磨完善一下,避免雷同,同时使项目背景更加真实可信. 一.某市智慧工地系统建设项目 某市住建局智慧工地系统建设项目是在该市住建局促进建筑 ...

  2. 精选28套Java实战项目大合集

    Java项目精选合集(附源码+资料+数据库)帮助你轻松搞定毕业设计! 28套精选java实战项目,无偿分享给小伙伴哟~ 为初学者而著 适合零基础的小伙伴们学习. 感兴趣的小伙伴可以点视频链接和小编一起 ...

  3. 【毕设|Java项目开发合集】(附源码)

    [毕设|Java项目开发合集] 14个Java项目(附源码)助你轻松搞定毕业设计! 1.新冠疫情统计系统 2.家教系统 3.进销存管理系统 4.饮食分享平台 5.宠物领养平台 6.销售评价系统 7.酒 ...

  4. 年度盘点!必看AI顶会论文、Github高星项目大合集(附链接)

    目前,国外计算机界评价学术水平主要是看在顶级学术会议上发表的论文,特别是在机器学习.计算机视觉和人工智能领域,顶级会议才是王道.本期我们盘点了2019年人工智能领域的顶会,如最核心的顶会AAAI.IJ ...

  5. 独家 | 年度盘点!必看AI顶会论文、Github高星项目大合集(附链接)

    目前,国外计算机界评价学术水平主要是看在顶级学术会议上发表的论文,特别是在机器学习.计算机视觉和人工智能领域,顶级会议才是王道.本期我们盘点了2019年人工智能领域的顶会,如最核心的顶会AAAI.IJ ...

  6. 26套Java实战项目大合集

    最新最全的JAVA项目合集来啦,看完这26套毕设不再发愁 最近UP整理了一些Java项目,从初级练手项目到企业级电商项目,全部配备源码及笔记,如果你能全部吃透,直接成神,各个大厂都为你打开大门! 大家 ...

  7. 2022年终结版WPF项目实战合集发布

    前言 在年中, 组织了一个WPF公益视频教程, 在半天内凑集了2W+的费用由此启动了该视频录制计划, 到目前为止, 视频教程已经结束. 在这里非常感谢参与本次教程以及长期支持的同学, 下面将主要讲解关 ...

  8. 3. 投票 案例项目(合集)

    3.投票-1创建项目和子应用 创建项目 命令 $ python django-admin startproject mysite 目录结构 mysite/ # 项目容器.可任意命名manage.py ...

  9. Easyx项目小合集

    这好像是很早之前,在官网找的项目 目录 项目名称: 迷宫 项目名称: 打雷风景 项目名称: 烟花 项目名称: 迷宫 #include <graphics.h> #include <t ...

最新文章

  1. Tensorflow多线程输入数据处理框架(一)——队列与多线程
  2. linux下top命令
  3. Spring应用的单元测试
  4. a或b search vim_vim编辑器
  5. 教您如何在MathType中输入空白区域
  6. Network Virtualization In Solaris 11
  7. ios通过url下载显示图片
  8. 2019电子设计大赛:纸张计数显示装置
  9. 强烈推荐!Python 这个宝藏库 re 正则匹配
  10. iPad——添加学校邮箱到邮件解决方案
  11. HTTP的options方法作用
  12. 生日祝福卡片 html,暖心的卡片生日祝福语
  13. React中过渡动画的编写方式
  14. 在chrome中f12控制自动刷新页面增加阅读量方法
  15. OPENWRT 修改串口(ttyS*)笔记
  16. Code Project精彩系列(2)
  17. 计算机策略更新失败用户策略更新失败,升级更新win10遇到错误代码8024000B的两种解决办法...
  18. 红帽linux挑战赛题目,浅谈红帽linux挑战赛(三)
  19. 图片名称重命名错误了怎么恢复
  20. 全景式对比中美金融科技发展水平:硬件持平,软件各有特色

热门文章

  1. 苹果iPhone保修计划首次覆盖意外损坏
  2. dynamic_cast介绍
  3. Linux sz和rz 命令安装
  4. Select2-Ajax获取数据
  5. 谈加薪,真不是涨点钱那么简单
  6. sql去重保留需要返回的字段信息
  7. sse php,在nginx下利用php配置SSE的正确方法
  8. django meta ordering排序
  9. 抖音康辉机器人_康辉录抖音,没想到央视主播们这么会玩!
  10. 什么是导体、绝缘体、半导体、绝缘材料?什么叫电流的热效应、磁效应、化学效应?