js 分頁查詢通過獲取數據、劃分頁面、創建導航控件、更新頁面內容和記錄當前頁面來實現。關鍵步驟包括:獲取數據并劃分頁面創建頁面導航控件更新頁面內容記錄當前頁面加載更多數據(可選)
JS 分頁查詢實現
JS 實現分頁查詢的主要步驟如下:
1. 獲取數據并劃分頁面:
從服務器獲取數據并存儲在數組或列表中。
根據每頁要顯示的數據量,將數據劃分為多個頁面。
2. 創建頁面導航控件:
創建一個包含頁面鏈接或按鈕的導航控件。
每個鏈接或按鈕對應一個頁面。
3. 更新頁面內容:
當用戶點擊一個頁面鏈接或按鈕時,獲取該頁面的數據。
使用 JavaScript 更新頁面內容以顯示當前頁面的數據。
4. 記錄當前頁面:
跟蹤用戶當前所在的頁面,通常使用一個變量或 cookie。
5. 加載更多數據(可選):
如果有更多數據,可以提供一個“加載更多”按鈕或自動加載更多數據。
獲取下一頁數據并更新頁面內容。
示例實現:
// 1. 獲取數據并劃分頁面 const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const pageSize = 5; const pages = []; for (let i = 0; i { const link = document.createElement("a"); link.href = "#"; link.textContent = index + 1; link.addEventListener("click", (e) => { e.preventDefault(); showPage(index); }); nav.appendChild(link); }); // 3. 更新頁面內容 function showPage(index) { const pageData = pages[index]; const output = document.getElementById("output"); output.innerHTML = ""; pageData.forEach(item => { const li = document.createElement("li"); li.textContent = item; output.appendChild(li); }); } // 4. 記錄當前頁面 let currentPage = 0; // 5. 加載更多數據(可選) const loadMoreBtn = document.getElementById("load-more"); loadMoreBtn.addEventListener("click", () => { if (currentPage
登錄后復制