在前端開發中，實現高效的分頁功能是提升用戶體驗的關鍵。本文將介紹一種智能分頁渲染方案：用戶點擊特定頁碼時，動態渲染相鄰的5頁，并同步更新“上一頁”和“下一頁”的點擊事件與狀態。此方案通過減少一次性渲染的DOM元素數量來提高性能，同時確保交互的流暢性。

一、需求分析

我們需要實現以下功能：

1. 初始渲染分頁組件，包括當前頁、相鄰頁碼（如共10頁時顯示1-5頁）。
2. 用戶點擊某一頁碼時，重新計算并渲染該頁碼及其相鄰的5頁（例如點擊第6頁，則渲染4-8頁）。
3. 動態更新“上一頁”和“下一頁”按鈕的點擊事件及禁用狀態（如當前為第1頁時禁用“上一頁”）。
4. 通過事件傳遞頁面切換信息，便于異步加載數據。

二、技術實現

1. 數據結構設計

使用對象或數組存儲分頁信息，包括總頁數（totalPages）、當前頁（currentPage）、相鄰頁數（adjacentCount，本例為5）。例如：
`javascript
const pagination = {
totalPages: 20,
currentPage: 1,
adjacentCount: 5
};
`

2. 動態渲染頁碼函數

編寫函數 renderPagination()，根據當前頁計算應顯示的頁碼范圍。核心邏輯如下：

- 計算起始頁碼：startPage = Math.max(1, currentPage - Math.floor(adjacentCount / 2))
- 計算結束頁碼：endPage = Math.min(totalPages, startPage + adjacentCount - 1)
- 調整起始頁碼以確保始終顯示相鄰的5頁（當接近邊界時）：
`javascript
if (endPage - startPage + 1 < adjacentCount) {
startPage = Math.max(1, endPage - adjacentCount + 1);
}
`

3. DOM渲染與事件綁定

使用JavaScript動態生成頁碼按鈕，并為每個按鈕添加點擊事件。示例代碼片段：
`javascript
function createPageButtons() {
const container = document.getElementById('pagination');
container.innerHTML = '';

// 添加上一頁按鈕
const prevButton = document.createElement('button');
prevButton.textContent = '上一頁';
prevButton.disabled = (pagination.currentPage === 1);
prevButton.addEventListener('click', () => {
if (pagination.currentPage > 1) {
pagination.currentPage--;
renderPagination();
transmitPageChange(); // 信息傳輸函數
}
});
container.appendChild(prevButton);

// 渲染相鄰頁碼按鈕
for (let i = startPage; i <= endPage; i++) {
const pageButton = document.createElement('button');
pageButton.textContent = i;
pageButton.className = (i === pagination.currentPage) ? 'active' : '';
pageButton.addEventListener('click', () => {
pagination.currentPage = i;
renderPagination();
transmitPageChange();
});
container.appendChild(pageButton);
}

// 添加下一頁按鈕
const nextButton = document.createElement('button');
nextButton.textContent = '下一頁';
nextButton.disabled = (pagination.currentPage === pagination.totalPages);
nextButton.addEventListener('click', () => {
if (pagination.currentPage < pagination.totalPages) {
pagination.currentPage++;
renderPagination();
transmitPageChange();
}
});
container.appendChild(nextButton);
}
`

4. 信息傳輸機制

定義 transmitPageChange() 函數，用于在頁面切換時傳遞信息。這可以通過自定義事件、回調函數或狀態管理實現。例如：
`javascript
function transmitPageChange() {
// 方式1：觸發自定義事件
const event = new CustomEvent('pageChange', {
detail: { currentPage: pagination.currentPage }
});
document.dispatchEvent(event);

// 方式2：調用回調函數（如用于數據請求）
if (typeof onPageChange === 'function') {
onPageChange(pagination.currentPage);
}
}
`

三、優化與擴展

1. 性能優化：使用文檔片段（DocumentFragment）批量操作DOM，減少重繪次數。
2. 視覺效果：為當前頁按鈕添加高亮樣式，并為禁用按鈕添加透明度效果。
3. 邊界處理：當總頁數少于相鄰頁數時，顯示所有頁碼。
4. 異步支持：結合Ajax或Fetch API，在頁面切換時異步加載數據并更新內容區域。

四、

通過動態渲染相鄰頁碼并智能更新交互事件，該方案實現了高效的前端分頁功能。它不僅提升了頁面加載性能，還通過事件傳輸機制確保了數據與視圖的同步。開發者可根據實際需求調整相鄰頁數或擴展更多功能（如跳轉輸入框），以進一步優化用戶體驗。