发布时间:2024-10-31 13:01
完整代码(记账项目)
完整代码(旅游后台项目)
提示:以下是本篇文章正文内容,下面案例可供参考
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li id="first">
<a href="javascript:void(0);">
<span aria-hidden="true">首页span>
a>
li>
<li id="prev">
<a href="javascript:void(0);" aria-label="Previous">
<span aria-hidden="true">上一页span>
a>
li>
<li name="pageNum" th:each="i : ${page.navigatepageNums}" th:class="${i == page.pageNum} ? 'active'">
<a href="javascript:void(0);" th:text="${i}">a>
li>
<li id="next">
<a href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">下一页span>
a>
li>
<li id="last">
<a href="javascript:void(0);">
<span aria-hidden="true">末页span>
a>
li>
<span style="font-size: 20px;margin-left: 5px;"
th:text="|共 ${page.total} 条记录,${page.pages}共页, 每页行数: ${page.pageSize} 行|">span>
<select id="setRows">
<option value="5" th:selected="${5 == page.pageSize}">5option>
<option value="10" th:selected="${10 == page.pageSize}" >10option>
<option value="20" th:selected="${20 == page.pageSize}" >20option>
<option value="30" th:selected="${30 == page.pageSize}" >30option>
select>
ul>
nav>
div>
在写完HTML代码之后,点分页的相关按钮是没有反应的,需要添加对应的响应事件。
逻辑页好理解,就是点击相关的按钮,能呈现出对应的现象,展示数据。
<script>
// 分页
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();
});
这里的分页代码比较简单:
<ul class="pagination">
<li><button class="btn btn-default" id="first">第一页button>li>
<li><button class="btn btn-default" id="prev">上一页button>li>
<li th:each="p: ${page.navigatepageNums}">
<button class="btn btn-default" name="pn" th:text="${p}" th:disabled="${p == page.pageNum}">button>
li>
<li><button class="btn btn-default" id="next">下一页button>li>
<li><button class="btn btn-default" id="last">最后页button>li>
ul>
<script>
$(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);
}
})
</script>