文章目录
- 前言
- 一、旅游后台项目分页
-
- 1.1 html页面的分页代码
- 1.2 效果
- 1.3 添加点击事件
- 二、记账项目的分页
-
- 1.1 分页代码
- 1.2 分页代码
- 三、总结
前言 本篇主要记录，我在学习springboot的过程中，通过Thymeleaf和Bootstrap样式进行分页的相关操作，留做记录。 这里只展示部分重点代码片段，完整代码，在gite上，有兴趣的可以去看看。两个项目使用的分页功能稍有不同，但是大体的原理上是相同的，只有页面绑定跳转事件的方式稍稍有所不同。 完整代码（记账项目）
完整代码（旅游后台项目）
提示：以下是本篇文章正文内容，下面案例可供参考
一、旅游后台项目分页 1.1 html页面的分页代码
1.2 效果 分页的效果和我下面展示的类似，
文章图片
1.3 添加点击事件 在写完HTML代码之后，点分页的相关按钮是没有反应的，需要添加对应的响应事件。
逻辑页好理解，就是点击相关的按钮，能呈现出对应的现象，展示数据。
>
// 分页
var pageNum = [[${page.pageNum}]];
var pages = [[${page.pages}]];
var hasNextPage = [[${page.hasNextPage}]];
var hasPreviousPage = [[${page.hasPreviousPage}]];
// 判断按钮状态
// 没有上一页
if(!hasPreviousPage) {
$("#prev").addClass("disabled");
$("#first").addClass("disabled");
}
// 没有下一页
if(!hasNextPage) {
$("#next").addClass("disabled");
$("#last").addClass("disabled");
}// 添加事件
// 点击首页
$("#first").click(function () {
if(!$("#first").hasClass("disabled")) {
$("#pageNum").val(1);
$("#qf").submit();
}
});
// 点击上一页
$("#prev").click(function () {
if(!$("#prev").hasClass("disabled")) {
$("#pageNum").val(pageNum - 1);
$("#qf").submit();
}
});
// 下一页
$("#next").click(function () {
if(!$("#next").hasClass("disabled")) {
$("#pageNum").val(pageNum + 1);
$("#qf").submit();
}
});
// 最后一页
$("#last").click(function () {
if(!$("#last").hasClass("disabled")) {
$("#pageNum").val(pages);
$("#qf").submit();
}
});
//页码分页
$("li[name='pageNum']").click(function(){
if (!$(this).hasClass("active")) {
$("#pageNum").val($(this).children("a").html());
$("#qf").submit();
}
});
// 设置每页行数
$("#setRows").change(function () {
console.log($(this).val())
$("#pageSize").val($(this).val());
$("#pageNum").val(1);
$("#qf").submit();
});
二、记账项目的分页 1.1 分页代码 这里的分页代码比较简单：
-
【html|SpringBoot学习（五）——————Thymeleaf +bootstrap 分页】但是效果差不多
文章图片
1.2 分页代码
>
$(function() {
//通过内联js得到分页先关数据
var pageNum = [[${page.pageNum}]];
//当前页
var pageCount = [[${page.pages}]];
//总页数
var hasNextPage = [[${page.hasNextPage}]];
//true，有下一页
var hasPreviousPage = [[${page.hasPreviousPage}]];
//true，有下一页//按钮事件
$("#next").click(function() {
$("#pageNum").val(pageNum + 1);
$("#qf").submit();
});
$("#prev").click(function() {
$("#pageNum").val(pageNum - 1);
$("#qf").submit();
});
$("#first").click(function() {
$("#pageNum").val(1);
$("#qf").submit();
});
$("#last").click(function() {
$("#pageNum").val(pageCount);
$("#qf").submit();
});
//点击页面跳转
$("button[name='pn']").click(function() {
$("#pageNum").val($(this).html());
$("#qf").submit();
});
//控制按钮状态
if (!hasNextPage) {
$("#last").prop("disabled", true);
$("#next").prop("disabled", true);
}
if (!hasPreviousPage) {
$("#first").prop("disabled", true);
$("#prev").prop("disabled", true);
}})
三、总结 两中分类没什么本质区别，就是代码的多少而已。
推荐阅读
- springboot系列|SpringBoot 整合 Thymeleaf & 如何使用后台模板快速搭建项目
- spring|初学者快速入门SpringBoot，并学会创建工程
- java|SpringBoot学习（三）—————— 框架整合其他框架之三（Thymeleaf）
- SpringBoot|SpringBoot——SSMP整合案例
- web开发学习|HTML期末大作业放在了阿里云服务器上
- Spring|Spring Cloud框架学习-Spring Cloud Sleuth
- Spring|【Spring】初识Spring--Spring介绍
- Spring|Spring Cloud框架学习-Spring Cloud Consul
- Spring|Spring Cloud框架学习-Spring Cloud OpenFeign