完整代碼源碼可以在這里下載
1.在 HTML文件建立列表目標節點和翻頁器目標節點
<body>
<!--頁面控制器 -->
<div id="nav"></div>
<!--列表顯示 -->
<div class="root" id="target"></div>
<!--導入js-->
<script src="./test.js"></script>
</body>
2.JS
分頁控制器函數封裝
/** * * @param {列表渲染目標節點} listTarget * @param {頁面控制器目標節點} navTarget * @param {列表項渲染函數} renderFunc * @param {每頁項數} pageSize * @param {列表數據源} dataSourse */
function renderPageNav(listTarget, navTarget, renderFunc, pageSize, dataSourse) {
// 總頁數
const pageLength = Math.ceil(dataSourse.length / pageSize);
//頁面控制器
const pageController = {
cur: 0,
toPage: function (index) {
listTarget.innerHTML = '';
for (let i = (index - 1) * pageSize; i < index * pageSize; i++) {
if (dataSourse[i]) {
listTarget.appendChild(renderFunc(dataSourse[i]));
} else {
break;
}
}
this.cur = index;
console.log(this.cur)
},
next: function () { this.toPage(this.cur + 1) },
prev: function () { this.toPage(this.cur - 1) },
start: function () { this.toPage(1) },
end: function () { this.toPage(pageLength) }
}
// 頁碼按鈕渲染
const pageBTN = index => {
const btn = document.createElement('b');
btn.innerHTML = index;
btn.onclick = () => pageController.toPage(index);
return btn
};
// 第一頁按鈕
const startBTN = document.createElement('b');
startBTN.innerHTML = '《';
startBTN.onclick = () => {
pageController.start()
}
navTarget.appendChild(startBTN)
// 上一頁按鈕
const prevBTN = document.createElement('b');
prevBTN.innerHTML = '<';
prevBTN.onclick = () => {
if (pageController.cur != 1)
pageController.prev()
}
navTarget.appendChild(prevBTN)
// 頁面跳轉按鈕
const page = document.createElement('span');
for (let i = 1; i <= pageLength; i++) {
page.appendChild(pageBTN(i))
}
navTarget.appendChild(page)
// 下一頁按鈕
const nextBTN = document.createElement('b');
nextBTN.innerHTML = '>';
nextBTN.onclick = () => {
if (pageController.cur != pageLength) {
pageController.next()
}
}
navTarget.appendChild(nextBTN)
// 尾頁按鈕
const endBTN = document.createElement('b');
endBTN.innerHTML = '》';
endBTN.onclick = () => {
if (pageController.cur != pageLength) {
pageController.end()
}
}
navTarget.appendChild(endBTN)
}
列表項渲染函數
//渲染單個Item
function renderItem(item) {
const aItem = document.createElement("div");
const inner = `<div class='card'> <p class="card__text"> ${item.desc} </p> </div>`;
aItem.innerHTML = inner;
return aItem;
}
// 這里存后台發來的數據
var data = [
{
desc: "11111"
},
{
desc: "22222"
},
{
desc: "3333"
},
{
desc: "44444"
},
{
desc: "55555"
},
{
desc: "66666"
},
{
desc: "77777"
},
{
desc: "8888"
},
{
desc: "9999"
},
{
desc: "aaaaa"
}
];
// 列表渲染目標節點
const listTarget = document.querySelector("#target");
// 導航欄渲染目標節點
const navTarget = document.querySelector("#nav");
運行分頁器函數
renderPageNav(listTarget, navTarget, renderItem, 3, data);