spring boot+thymeleaf+semantic ui 分页

参考:

https://my.oschina.net/ayyao/blog/898041

后端 springboot 使用:

com.github.pagehelper.PageInfo,作为分页对象

<!--引入分页插件-->
<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.12</version>
</dependency>controller里代码:import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;String orderBy = "id desc";
PageHelper.startPage(pageNum, 10, orderBy);
List<User> users = userService.list();
if (users != null) {PageInfo<Type> pageInfo = new PageInfo<>(types);model.addAttribute("pageInfo", pageInfo);
}

前端分页代码:


<tfoot><tr><th colspan="6" ><!--分页条 begin--><div class="ui left floated pagination mini menu"><!-- 首页 --><a th:href="@{/sss/userapi(pageNum=1)}" class="icon item" >首页</a><!-- 上一页previous --><a th:if="${pageInfo.hasPreviousPage}" class="icon item" th:classappend="${pageInfo.pageNum}==0 ? 'disabled' : ''"th:href="@{/sss/userapi(pageNum=${pageInfo.prePage})}"><i class="angle left icon">上一页</i></a><!-- 中间页面1-10页面--><div th:each="p : ${pageInfo.navigatepageNums}"><a class="icon item" th:classappend="${pageInfo.pageNum}==${p} ? 'disabled' : ''"th:href="@{/sss/userapi(pageNum=${p})}"><i th:text="${p}"></i></a></div><!-- 下一页next --><a th:if="${pageInfo.hasNextPage}" class="icon item"th:href="@{/sss/userapi(pageNum=${pageInfo.nextPage})}">下一页<i class="angle right icon"></i></a><!-- 尾页 --><a th:href="@{/sss/userapi(pageNum=${pageInfo.pages})}" class="icon item" >尾页</a></div><!--分页条 end--></th></tr>
</tfoot>

首页、中间页、尾页样式:

其他:

Thymeleaf循环语句_thymeleaf 循环_苦海无边,不能上岸的博客-CSDN博客

Table | Semantic UI 官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高通滤波器,低通滤波器

1.高通滤波器是根据像素与邻近像素的亮度差值来提升该像素的亮度。 import cv2 import numpy as np from scipy import ndimagekernel_3_3 np.array([[-1,-1,-1],[-1,8,-1],[-1,-1,-1]]) print(kernel_3_3) kernel_5_5 np.array([[-1,-1,-1,-1,-1],[-1,1,2,1,-1],[-1,2,4,2,-…

音视频技术开发周刊 | 304

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 更强的Llama 2开源&#xff0c;可直接商用&#xff1a;一夜之间&#xff0c;大模型格局变了 Meta 终于发布了大家期待已久的免费可商用版本 Llama 2。 6000份问卷透露出AI…

ClickHouse目录结构

默认安装路径&#xff1a;/var/lib/clickhouse/ 目录结构&#xff1a; 主要介绍metadata和data metadata 其中的default、system及相应的数据库&#xff0c;.sql文件即数据库创建相关sql语句 进入default数据库&#xff08;默认数据库&#xff09;&#xff1a; 可以看到数据库…

「如何优雅有效利用周末和下班时间?」

文章目录 每日一句正能量前言下班的时间规划周末的时间规划提升周末体验感的好方法怎样才能获得充分的休息后记 每日一句正能量 眼望古城街尽&#xff0c;心谱落愁无序&#xff0c;旧时的誓言&#xff0c;曾而相似&#xff0c;河水在遵循河道的指引下&#xff0c;在曲折前进中放…

QT学习笔记-QT5.15 + MSVC编译套件时编译日志及运行日志日志乱码解决

QT学习笔记-QT5.15 MSVC编译套件时编译日志及运行日志日志中文乱码解决 0、基础环境1、QtCreator中的基本设置编辑->首选项->文本编辑器 2、问题1&#xff1a;MSVC编译日志乱码问题解决问题描述解决方法 3、问题2&#xff1a;MSVC构建套件编译后程序运行日志乱码问题问题…

【电影推荐系统】实时推荐

概览 技术方案&#xff1a; 日志采集服务&#xff1a;通过利用Flume-ng对业务平台中用户对于电影的一次评分行为进行采集&#xff0c;实时发送到Kafka集群。消息缓冲服务&#xff1a;项目采用Kafka作为流式数据的缓存组件&#xff0c;接受来自Flume的数据采集请求。并将数据推…

深度学习:使用全连接神经网络FCN实现MNIST手写数字识别

1 引言 本项目构建了一个全连接神经网络(FCN)&#xff0c;实现对MINST数据集手写数字的识别&#xff0c;没有借助任何深度学习算法库&#xff0c;从原理上理解手写数字识别的全过程&#xff0c;包括反向传播&#xff0c;梯度下降等。 2 全连接神经网络介绍 2.1 什么是全连接…

maven引入本地jar包的简单方式【IDEA】【SpringBoot】

前言 想必点进来看这篇文章的各位&#xff0c;都是已经习惯了Maven从中央仓库或者阿里仓库直接拉取jar包进行使用。我也是&#x1f921;&#x1f921;。 前两天遇到一个工作场景&#xff0c;对接三方平台&#xff0c;结果对方就是提供的一个jar包下载链接&#xff0c;可给我整…

SpringBoot使用MyBatis Plus + 自动更新数据表

1、Mybatis Plus介绍 Mybatis&#xff0c;用过的都知道&#xff0c;这里不介绍&#xff0c;mybatis plus只是在mybatis原来的基础上做了些改进&#xff0c;增强了些功能&#xff0c;增强的功能主要为增加更多常用接口方法调用&#xff0c;减少xml内sql语句编写&#xff0c;也可…

python使用selenium 打开谷歌浏览器闪退, 怎么解决

问题描述&#xff1a; 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 使用 Selenium 操作 Chrome 浏览器&#xff0c; Chrome 浏览器闪退 问题解决&#xff1a; 可能是以下几个方面出现了问题&#xff1a; 1. Chromedriver 版本与 Chrome 浏览器版本不匹配 你需要确保你正在…

安卓:JzvdStd——网络视频播放器

目录 一、JzvdStd介绍 JzvdStd的特点和功能&#xff1a; JzvdStd常用方法&#xff1a; 二、JzvdStd使用 1、补充知识&#xff1a; 例子&#xff1a; MainActivity &#xff1a; VideoPageAdapter &#xff1a; activity_main&#xff1a; video_page&#xff1a; …

第十次CCF计算机软件能力认证

第一题&#xff1a;分蛋糕 小明今天生日&#xff0c;他有 n 块蛋糕要分给朋友们吃&#xff0c;这 n 块蛋糕&#xff08;编号为 1 到 n&#xff09;的重量分别为 a1,a2,…,an。 小明想分给每个朋友至少重量为 k 的蛋糕。 小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋…

Blazor前后端框架Known-V1.2.9

V1.2.9 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…

UE4 unlua学习笔记

将这三个插件放入Plugins内并重新编译 创建一个BlueprintLibrary&#xff0c;声明一个全局函数 在这里声明路径 点击Create Lua Template 在Content的Script即可生成对应的lua文件打开它&#xff01; 显示以上lua代码 打印Hello Unlua 创建该UI&#xff0c;就会在创建UI的Con…

Flutter-基础Widget

Flutter页面-基础Widget 文章目录 Flutter页面-基础WidgetWidgetStateless WidgetStateful WidgetState生命周期 基础widget文本显示TextRichTextDefaultTextStyle 图片显示FlutterLogoIconImageIamge.assetImage.fileImage.networkImage.memory CircleAvatarFadeInImage 按钮R…

火山引擎DataLeap如何解决SLA治理难题(二):申报签署流程与复盘详解

申报签署流程详解 火山引擎DataLeap SLA保障的前提是先达成SLA协议。在SLA保障平台中&#xff0c;以 申报单签署的形式达成SLA协议。平台核心特点是 优化了SLA达成的流程&#xff0c;先通过 “系统卡点计算”减少待签署任务的数量&#xff0c;再通过 “SLA推荐计算”自动签署部…

【Linux】网络基础

&#x1f34e;作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;Linux系统网络编程 文章目录 一、协议初识和网络协议分层&#xff08;TCP/IP四层模型&#xff09;认识协议TCP/IP五层&#xff08;或四层&#xff09;模型 二、认识MAC地址和IP地址认识MAC地址认识IP地址认…

基于Java的闲置物品管理系统(源码+文档+数据库)

很多在校学生经常因为冲动或者因为图一时的新鲜,购买了很多可能只是偶尔用一下的物品&#xff0c;大量物品将会闲置&#xff0c;因此&#xff0c;构建一个资源共享平台&#xff0c;将会极大满足师院学生的需求,可以将其闲置物品挂在资源共享平台上让有需要的学生浏览&#xff0…

Linux【网络基础】数据链路层IP协议技术补充DNSDHCP

文章目录 一、数据链路层&#xff08;1&#xff09;数据链路层与网络层的关联&#xff08;2&#xff09;局域网通信原理&#xff08;3&#xff09;以太网协议&#xff08;4&#xff09;ARP协议 二、NAT协议三、NAPT协议四、ICMP协议五、DNS六、DHCP 一、数据链路层 &#xff0…

二、JVM-深入运行时数据区

深入运行时数据区 计算机体系结构 JVM的设计实际上遵循了遵循冯诺依曼计算机结构 CPU与内存交互图&#xff1a; 硬件一致性协议&#xff1a; MSI、MESI、MOSI、Synapse、Firely、DragonProtocol 摩尔定律 摩尔定律是由英特尔(Intel)创始人之一戈登摩尔(Gordon Moore)提出来…