前端
<!--展示数据-->
<table id="show" border="1px" cellpadding="10px">
</table>
<div class="page">
</div>
js
var outshow ="";
let itableEl = document.querySelector("#show");
function gopage(pno, psize) { //翻页
$.ajax({
url: "http://localhost:【端口】/search/all",
type: "get",
dataType: "json",
contentType: "application/json;charset=UTF-8", //设置请求为json格式,中文的为utf-8
success: function (result){ //后端返回的数据
itableEl.innerHTML=result;
},
Error: function () {
window.alert("查询发生错误~");
}
})
/**
分页组件的实现
*/
//计算行数
let rowsNumber = itableEl.rows.length;
//计算分多少页
let pages = (rowsNumber / psize) > parseInt(rowsNumber / psize) ? parseInt(((rowsNumber / psize) + 1)) : parseInt(rowsNumber / psize);
//当前显示的数据(数据显示的第一行,最后一行所在的位置)
let startRow = (pno - 1) * psize + 1;
let endRow = pno * psize > rowsNumber ? rowsNumber : pno * psize;
//分页框
let pageBoxEl = document.querySelector(".page");
//遍历,如果数据在当前页,否则就隐藏
for (let i = 1; i <= rowsNumber; i++) {
if (i >= startRow && i <= endRow) {
itableEl.rows[i - 1].style.display = 'block'; //行的展示
} else {
itableEl.rows[i - 1].style.display = 'none';// 行的隐藏
}
}
//分页按钮
//如果当前在第一页,则第一页和首页将以链接形式显示(可以提供给用户进行点击,并可切换页数),
// 否则只能进行文本形式显示
let temStr = "当前共" + rowsNumber + "条数据,分" + pages + "页显示,当前在第" + pno + "页";
if (pno > 1) {
temStr += '<a href="#" onClick="gopage(' + 1 + ',' + psize + ')">首页</a><a href="#" onClick="gopage(' + (pno - 1) + ',' + psize + ')">第一页</a>'
} else {
temStr += '首页 <第一页';
}
if (pno < pages) {
temStr += ',<a href="#" onClick="gopage(' + (pno + 1) + ',' + psize + ')">下一页 ></a><a href="#" onClick="gopage(' + pages + ',' + psize + ')">尾页</a>'
} else {
temStr += '第一页> 尾页';
}
pageBoxEl.innerHTML = temStr;
}
//开始情况时,初定值显示第一页,每页设置为5条数据
function enter () {
gopage(1, 5);
}
这样就可以实现基本的一个分页功能
最后希望可以帮到你