jQuery實現分頁代碼分享

jQuery實現分頁代碼分享

在Web開發中，分頁功能是常見的需求之一。通過分頁，用戶可以方便地瀏覽大量數據，而不需要一次性加載所有內容。本文將介紹如何使用jQuery實現一個簡單的分頁功能。

1. HTML結構

首先，我們需要一個基本的HTML結構來展示分頁內容。假設我們有一個包含多個項目的列表，每個項目代表一頁的內容。

<div id="content">
    <div class="page">Page 1 Content</div>
    <div class="page">Page 2 Content</div>
    <div class="page">Page 3 Content</div>
    <div class="page">Page 4 Content</div>
    <div class="page">Page 5 Content</div>
</div>
<div id="pagination"></div>

2. jQuery分頁邏輯

接下來，我們使用jQuery來實現分頁邏輯。首先，我們需要隱藏所有頁面內容，然后根據用戶點擊的頁碼顯示相應的內容。

$(document).ready(function() {
    var itemsPerPage = 1; // 每頁顯示的項目數
    var totalItems = $('.page').length; // 總項目數
    var totalPages = Math.ceil(totalItems / itemsPerPage); // 總頁數

    // 初始化分頁
    function initPagination() {
        for (var i = 1; i <= totalPages; i++) {
            $('#pagination').append('<a href="#" class="page-link">' + i + '</a>');
        }
        showPage(1); // 默認顯示第一頁
    }

    // 顯示指定頁的內容
    function showPage(pageNumber) {
        $('.page').hide();
        $('.page').slice((pageNumber - 1) * itemsPerPage, pageNumber * itemsPerPage).show();
    }

    // 綁定分頁鏈接點擊事件
    $(document).on('click', '.page-link', function(e) {
        e.preventDefault();
        var page = $(this).text();
        showPage(page);
    });

    initPagination();
});

3. 樣式調整

為了讓分頁效果更好，我們可以添加一些CSS樣式來美化分頁鏈接。

#pagination {
    margin-top: 20px;
}

.page-link {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.page-link:hover {
    background-color: #f0f0f0;
}

4. 總結

通過以上步驟，我們實現了一個簡單的jQuery分頁功能。用戶可以通過點擊分頁鏈接來瀏覽不同的頁面內容。這個分頁功能可以根據實際需求進行擴展，例如支持動態加載數據、調整每頁顯示的項目數等。希望本文對你有所幫助！