-
核心代码
<body>
<div class="ui-tab">
<!-- 具体消息内容 -->
</div>
<div class="paging">
<!-- 分页布局-->
<table>
<tr class="page-font">
<td><button class="firstPage" type="button" onclick="page_click(this)">首页</button> | </td>
<td><button class="beforePage" type="button" onclick="page_click(this)">上一页</button> | </td>
<td>第<input type="button" class="currentPage" value="1" readonly="readonly">页</td>
<td>共<input type="button" class="totalPage" value="10" readonly="readonly">页</td>
<td> | <button class="nextPage" type="button" onclick="page_click(this)">下一页</button></td>
<td> | <button class="lastPage" type="button" onclick="page_click(this)">尾页</button></td>
</tr>
</table>
</div>
<script>
let totalPage = 10; //一共多少页
//前端获取后台数据并呈现在<div class="ui-tab">中
function information_display(page=1) {
const informationDisplay = document.querySelector(".ui-tab");
}
//初始化页面加载
window.onload = function () {
}
//上一页、下一页，首页和尾页的单击触发事件
function page_click(item) {
console.log(item);
let pageNumber=0;
//首页
if (item.className == "firstPage"){
console.log(item.className);
//pageNumber = document.querySelector(".currentPage").value;
document.querySelector(".currentPage").value=1;
information_display(1)
}
//上一页
else if (item.className == "beforePage") {
console.log(item.className);
pageNumber = document.querySelector(".currentPage").value;
if (pageNumber > 1) {
document.querySelector(".currentPage").value=Number(pageNumber)-1;
information_display(Number(pageNumber)-1)
}
// else {
// document.querySelector(".beforePage").disabled="false";
// }
}
//下一页
else if (item.className == "nextPage") {
console.log(item.className);
pageNumber = document.querySelector(".currentPage").value;
console.log(pageNumber);
console.log(typeof(pageNumber));
if (pageNumber < totalPage) {
let n=document.querySelector(".currentPage").value=Number(pageNumber)+1;
information_display(Number(pageNumber)+1)
}
// else {
// document.querySelector(".nextPage").disabled="false";
// }
}
//尾页
else {
console.log(item.className);
//pageNumber = document.querySelector(".currentPage").value;
document.querySelector(".currentPage").value=totalPage;
information_display(totalPage)
}
}
</script>
</body>
-
实现效果
- 点击四个按钮，页数会变化（第 页）
-
点击四个按钮，会触发function information_display()函数。可以编写function information_display()函数，使该函数有请求指定页数数据并将这些数据渲染到<div class="ui-tab">标签里面的功能。
image.png
