分頁導航DOM更新實踐：JavaScript與jQuery的結合使用
在Web開發中，分頁導航是展示大量數據時不可或缺的UI組件。合理的分頁不僅可以提高應用性能，還能優化用戶體驗。本博客將通過一個實際的DOM結構和模擬數據，講解如何使用JavaScript和jQuery來動態更新分頁導航。
分頁場景講述
在設計分頁導航時，我們會遇到多種場景，每種場景都需要不同的處理方式：
-
總頁數較少：當數據量不大時，可能只需要顯示所有頁碼，無需省略。
?
-
當前頁在頁碼列表的邊緣：如果當前頁是第一頁或最后一頁，可能不需要“上一頁”或“下一頁”鏈接。
- 當前頁在中間：需要在頁碼列表中適當位置顯示當前頁，并在邊緣顯示第一頁和最后一頁的鏈接。
- 大量頁碼的省略處理：當總頁數很多時，不可能全部顯示，需要用省略號代替中間的頁碼。
理解這些場景有助于我們編寫靈活且健壯的分頁邏輯。
模擬數據
假設我們從后端API獲取了以下分頁數據：
var paginationData = {page: 1, // 當前頁碼pages : 5, //總頁數per_page: 10 , // 每頁顯示的項目數total: 50 // 總項目數
};
原始DOM結構
下面是現有的分頁DOM結構，它包含了頁碼信息和分頁控件：
<footer id="pagination-footer" class="panel-footer"><div class="row"><div class="col-sm-5 text-center"><small class="text-muted inline m-t-sm m-b-sm">showing 20-30 of 50 items</small></div><div class="col-sm-7 text-right text-center-xs"><ul class="pagination pagination-sm m-t-none m-b-none"><li><a href=""><i class="fa fa-chevron-left"></i></a></li><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href=""><i class="fa fa-chevron-right"></i></a></li></ul></div></div></footer>
更新分頁DOM的代碼
現在，我們將使用模擬數據和原始DOM結構，編寫updatePaginationDOM函數來更新分頁導航：
/**
* 更新分頁的DOM
* @param data 響應數據
*/
function updatePaginationDOM(data) {var footer = $('#pagination-footer');footer.empty(); // 清空原有分頁DOMvar paginationHTML = `<div class="row">
<div class="col-sm-5 text-center">
<small class="text-muted inline m-t-sm m-b-sm">每頁 ${data.per_page} 個，共 ${data.total} 個</small>
</div>
<div class="col-sm-7 text-right text-center-xs">
<ul class="pagination pagination-sm m-t-none m-b-none">`;// 當前頁碼大于1 ，添加“上一頁”鏈接if (data.page > 1) {paginationHTML += `<li><a href="#" data-page-number="${data.page - 1}"><i class="fa fa-chevron-left"></i></a></li>`;}// 計算并添加頁碼鏈接const maxPagesToShow = 5; // 顯示的頁碼數量const startPage = Math.max(1, data.page - Math.floor(maxPagesToShow / 2));// 計算顯示的開始頁碼const endPage = Math.min(data.pages, startPage + maxPagesToShow - 1);// 計算顯示的結束頁碼console.log(startPage,endPage)// 如果開始頁碼大于1，顯示省略號和第一頁的鏈接if (startPage > 1) {paginationHTML += `<li><a href="#">1</a></li>`;if (startPage > 2) paginationHTML += `<li><span>...</span></li>`;}for (let i = startPage; i <= endPage; i++) {paginationHTML += `<li class="${i === data.page ? 'active' : ''}"><a href="#">${i}</a></li>`;}if (endPage < data.pages) {if (endPage < data.pages - 1) paginationHTML += `<li><span>...</span></li>`;paginationHTML += `<li><a href="#" >${data.pages}</a></li>`;}// 當前頁碼小于總頁數，添加“下一頁”鏈接if (data.page < data.pages) {paginationHTML += `<li><a href="#" data-page-number="${data.page + 1}" ><i class="fa fa-chevron-right"></i></a></li>`;}paginationHTML += `
</ul>
</div>
</div>
`;footer.html(paginationHTML);// 使用事件委托來綁定分頁鏈接的點擊事件$('#pagination-footer .pagination a').on('click', function (e) {e.preventDefault(); // 阻止鏈接的默認行為var pageNumber = $(this).data('page-number');if (pageNumber) {loadMovies(pageNumber); // 調用 loadMovies 函數return}var page = $(this).text(); // 從鏈接文本獲取頁碼if (page > 0) {loadMovies(page); // 調用 loadMovies 函數}});
}
代碼解釋
- 清空現有DOM：首先清空
pagination-footer的內容，為新內容騰出空間。 - 構建分頁HTML：根據
data對象構建新的分頁HTML，包括頁碼信息和分頁鏈接。 - 更新顯示信息：更新頁碼顯示信息，如“showing 20-30 of 50 items”，以反映當前的頁碼和總項目數。
- 添加分頁鏈接：根據當前頁碼和總頁數動態添加分頁鏈接，包括“上一頁”、“下一頁”和頁碼數字。
- 綁定點擊事件：為分頁鏈接添加點擊事件，當用戶點擊時，調用
loadMovies函數加載對應頁的數據。
結論
通過上述步驟，我們可以看到如何使用JavaScript和jQuery動態更新分頁導航的DOM結構。通過理解不同的分頁場景，我們可以編寫出適應性強、用戶體驗佳的分頁邏輯。希望本博客能幫助你在實際開發中更好地實現分頁功能。
