實現JS分頁可以通過以下步驟:
獲取數據:從服務器或本地獲取數據,并將數據存儲在一個數組或對象中。
設置每頁顯示的數量和當前頁碼:確定每頁要顯示的數據數量,以及當前頁碼。
計算總頁數:根據數據的總數和每頁顯示的數量,計算出總頁數。
顯示當前頁的數據:根據當前頁碼和每頁顯示的數量,從數據數組或對象中提取對應頁碼的數據。
生成分頁按鈕:根據總頁數,生成相應數量的分頁按鈕,并為每個按鈕綁定點擊事件。
點擊分頁按鈕更新數據:當用戶點擊分頁按鈕時,根據按鈕對應的頁碼更新當前頁碼,并重新顯示當前頁的數據。
以下是一個簡單的JS分頁實現的示例代碼:
// 假設數據存儲在一個數組中
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var currentPage = 1; // 當前頁碼
var pageSize = 3; // 每頁顯示的數量
// 計算總頁數
var totalPages = Math.ceil(data.length / pageSize);
// 顯示當前頁的數據
function showData() {
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
var pageData = data.slice(startIndex, endIndex);
// 顯示數據
console.log(pageData);
}
// 生成分頁按鈕
function generatePagination() {
var pagination = document.getElementById('pagination');
pagination.innerHTML = '';
for (var i = 1; i <= totalPages; i++) {
var button = document.createElement('button');
button.textContent = i;
// 綁定點擊事件
button.addEventListener('click', function(event) {
currentPage = parseInt(event.target.textContent);
showData();
});
pagination.appendChild(button);
}
}
// 初始化
showData();
generatePagination();
以上代碼假設數據存儲在一個數組中,并且使用showData
函數顯示當前頁的數據,generatePagination
函數生成分頁按鈕,并為每個按鈕綁定點擊事件。點擊分頁按鈕會更新當前頁碼,并重新顯示當前頁的數據。