參考網上代碼實作一個基本的分頁功能，沒有完全實作，沒有更好的思路了，在這里請教大家。
1：目前顯示所有頁數，應該一次只顯示[1,2,3,4,5] [6,7,8,9,10] [11,12,13,14,15] 這樣的分頁；
2：JS 哪些部分該改進？
謝謝！
下面是全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Go Coding!</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
text-decoration: none;
font-size: 12px;
}
body {
padding: 20px;
}
.title {
font-size: 16px;
color: #f80;
}
.list>li {
padding: 6px;
border-bottom: 1px solid #eee;
}
.pagination {
padding: 4px;
}
.pagination a {
display: inline-block;
padding: 4px;
margin: 0 4px 0 0;
color: #00c;
}
</style>
</head>
<body>
<ul class="list"></ul>
<section class="pagination"></section>
<script>
let data = {
"list": [
{ "id": 1, "title": 2001 },
{ "id": 2, "title": 2002 },
{ "id": 3, "title": 2003 },
{ "id": 4, "title": 2004 },
{ "id": 5, "title": 2005 },
{ "id": 6, "title": 2006 },
{ "id": 7, "title": 2007 },
{ "id": 8, "title": 2008 },
{ "id": 9, "title": 2009 },
{ "id": 10, "title": 2010 },
{ "id": 11, "title": 2011 },
{ "id": 12, "title": 2012 },
{ "id": 13, "title": 2013 },
{ "id": 14, "title": 2014 },
{ "id": 15, "title": 2015 },
{ "id": 16, "title": 2016 },
]
}
let list = data.list;
console.log(`list-length: ${list.length}`);
pagination({
"current-page": 1,
"page-size": 5,
});
function pagination(par) {
let listBox = document.querySelector(".list");
let num = data.list.length;
let totalPage = 0;
let pageSize = par["page-size"];
let currentPage = par["current-page"];
if (num / pageSize > parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}
let sliceStart = (currentPage - 1) * pageSize;
let sliceEnd = currentPage * pageSize;
sliceEnd = sliceEnd > num ? num : sliceEnd;
let dataSlice = data.list.slice(sliceStart, sliceEnd);
let listText = "";
for (let item of dataSlice) {
listText += `
<li><h5 class="title">${item.id} - ${item.title}</h5></li>
`;
}
listBox.innerHTML = listText;
let htmlText = "";
if (currentPage > 1) {
htmlText += `
<a href="https://bbs.csdn.net/topics/#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">
上一頁
</a>
`;
}
for (let i = 1; i < totalPage + 1; i++) {
htmlText += `
<a href="https://bbs.csdn.net/topics/#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
${i}
</a>
`;
}
if (currentPage < totalPage) {
htmlText += `
<a href="https://bbs.csdn.net/topics/#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">
下一頁
</a>
`;
}
let pagination = document.querySelector(".pagination");
pagination.innerHTML = htmlText;
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
你少了一個引數：默認顯示幾個頁碼，比如是nums，默認5。然后for生成頁碼時根據這個當前頁碼和這個引數nums去生成。然后注意頁碼的邊界修正uj5u.com熱心網友回復：
而且一般翻頁也不是像你說的那個每五個一組的顯示的。大多是保證當前頁在頁碼串列的中間轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/284873.html
標籤：JavaScript