<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="./css/elementUiIndex.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<title>
javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能
</title>
<script src="./page.js"></script>
</head>
<body>
<div class="container">
<div class="title">执行结果</div>
<div class="search-result">
<div class="table-content-fixed">
<table cellspacing="0">
<thead>
<tr>
<th width="125px">姓名</th>
<th width="125px">年龄</th>
<th width="125px">学号</th>
<th width="125px">地址</th>
<th width="125px">成绩</th>
</tr>
</thead>
</table>
</div>
<div class="table-content-scroll">
<table cellspacing="0">
<tbody></tbody>
</table>
</div>
</div>
<div
role="pagination"
aria-label="pagination"
class="el-pagination pagination hort-box"
data-v-b770da44=""
>
<span class="el-pagination__total"></span>
<button
type="button"
class="btn-prev"
onclick="handlePageChange('prev')"
>
<i class="el-icon el-icon-arrow-left"></i>
</button>
<ul class="el-pager"></ul>
<button
type="button"
class="btn-next"
onclick="handlePageChange('next')"
>
<i class="el-icon el-icon-arrow-right"></i>
</button>
</div>
</div>
</body>
<script>
let currentPage = 1;
let pageCount = 8;
let rowCount = 78;
// 获取运行数据
function getRunData() {
// 处理滚动条引起的宽度 默认无滚动条
document.getElementsByClassName("table-content-fixed")[0].style = "";
// 获取数据
let runDataList = [
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
{
name: "张三",
age: "18",
studentNo: "01",
address: "",
point: "98",
},
];
// 处理滚动条引起的宽度 长度大于9出现滚动条
if (runDataList.length > 9) {
document.getElementsByClassName("table-content-fixed")[0].style =
"width:calc(100% - 8px)";
}
// 清空执行结果
let tbody = document.getElementsByTagName("tbody")[0];
tbody.innerHTML = "";
// 挂载执行结果
runDataList.forEach((item, index) => {
let tr = document.createElement("tr");
for (let key in item) {
let td = document.createElement("td");
td.width = "125px";
td.innerHTML = item[key];
tr.appendChild(td);
}
tbody.append(tr);
});
}
// 初始化页码
function initPage() {
setPage(
pageCount,
rowCount,
"container",
function (newPageObj) {
receivePageCallBack(newPageObj);
}
);
}
// 页码器跳转
function handlePageChange(val) {
let numberDomLists = document.getElementsByClassName("number");
if (val === "prev") {
currentPage--;
if (currentPage > 1) {
if (numberDomLists[1].innerText > currentPage) {
linkPrevPage(
document.getElementsByClassName("btn-quickprev")[0],
numberDomLists,
pageCount,
document.getElementsByClassName("container")[0],
function (newPageObj) {
receivePageCallBack(newPageObj);
}
);
}
}
} else if (val === "next") {
currentPage++;
if (currentPage < pageCount) {
if (
numberDomLists[numberDomLists.length - 2].innerText < currentPage
) {
linkNextPage(
document.getElementsByClassName("btn-quicknext")[0],
numberDomLists,
pageCount,
document.getElementsByClassName("container")[0],
function (newPageObj) {
receivePageCallBack(newPageObj);
}
);
}
}
}
let targetPage = getElementsByAttr(
"container",
"number",
"key",
currentPage
);
targetPage[0] && targetPage[0].onclick();
}
// 页码器回调
function receivePageCallBack(newPageObj) {
currentPage = newPageObj.newPage;
if (!newPageObj.flag) {
document
.getElementsByClassName("btn-prev")[0]
.removeAttribute("disabled");
document
.getElementsByClassName("btn-next")[0]
.removeAttribute("disabled");
if (currentPage == pageCount) {
selectLastPage(
pageCount,
"container",
function (newPageObj2) {
receivePageCallBack(newPageObj2);
}
);
} else if (currentPage == 1) {
initPage();
}
getRunData();
console.log(currentPage);
} else {
let numberDomLists = document.getElementsByClassName("number");
numberDomLists[numberDomLists.length - 2].onclick();
}
}
function run() {
getRunData();
initPage();
}
window.onload = function () {
run();
};
</script>
</html>
