如何使用 ajax 處理分頁中的頁面鏈接？

Question

我的代碼工作正常，但我想知道如何使用 jQuery Ajax 處理分頁頁面鏈接（頁碼）。任何人都知道如何呈現頁碼和處理頁面鏈接。 分頁下一個按鈕和上一個按鈕工作正常，但頁面鏈接不起作用。 如何使用 ajax 呈現頁碼和處理頁面鏈接？

現在看起來像這樣：

[Previous, 1, 2, 0, 5, 6, 7, 0, 10, 11, Next]

我該怎么做才能只顯示 4 個頁碼，而不是所有從當前頁碼開始的頁碼，如下所示：

上一頁1 2 3 4 ... 11下一頁

索引.html

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous" id="Next">
                <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
            </a>
        </li>
        <li class="page-item"><a class="page-link active" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next" id="Next">
                <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span>
            </a>
        </li>
    </ul>
</nav>

index.js

const fakeData = {
    data: [{
        row: 1,
        name: 'a'
    }, {
        row: 2,
        name: 'b'
    }, {
        row: 3,
        name: 'c'
    }, {
        row: 4,
        name: 'd'
    }, {
        row: 5,
        name: 'e'
    }, {
        row: 6,
        name: 'f'
    }, {
        row: 7,
        name: 'g'
    }],
    totalRecords: 7
};
// output Html
const Story = document.querySelector('#approvedList');
const pagination = document.querySelector('.pagination');

$(function () {

    var page = 1,
        records = 1,
        totalRecords = 0,
        search = '';

    // Run on page load
    fetchData();

    // Previous Page
    $('[aria-label="Previous"]').click(function () {
        if (page > 1) {
            page--;
        }
        fetchData();
    });

    // Next page 
    $('[aria-label="Next"]').click(function () {
        if (page * records < totalRecords) {
            page++;
        }
        fetchData();
    });
    // data fetching from API
    function fetchData() {
        totalCount = fakeData.totalCount;

        Story.innerHTML = '';

        fakeData.data.slice((page - 1) * records, page * records).map((object) => {
            Story.innerHTML +=
                `<tr >
                    <td>${object.row}</td>
                    <td>${object.name}</td>
                </tr > 
                `;
        })
        renderPagination();
    }


    $(document).on('click', '.page-item-numbers a', function () {
        page = parseInt($(this)[0].text);
        fetchData();
    });

    function renderPagination() {
        $('.page-item-numbers').remove();
        let pagesNumbers = Math.ceil(totalRecords / records);
        for (let i = 1; i <= pagesNumbers; i++) {
            $(`.pagination > li: nth - child(${i})`).after(` < li class="page-item page-item-numbers ${i == page ? 'active' : ''}" > <a class="page-link" href="#">${i}</a></ > `);
        }
    }

})

Answer 1

我創建了一個假數據變量，你的 api 結果應該是這樣的，包含一個數據數組和一個顯示數據總數的數字。

 const fakeData = { data: [{ row: 1, name: 'a' }, { row: 2, name: 'b' }, { row: 3, name: 'c' }, { row: 4, name: 'd' }, { row: 5, name: 'e' }, { row: 6, name: 'f' }, { row: 7, name: 'g' }], totalCount: 7 }; const Story = document.querySelector('#approvedList'); $(function() { var page = 1, records = 3, totalCount = 0, search = ''; // Run on page load fetchData(); $(document).on('click', '.page-item-numbers a', function() { page = parseInt($(this)[0].text); fetchData(); }); // Previous Page $('[aria-label="Previous"]').click(function() { if (page > 1) { page--; } fetchData(); }); // Next page $('[aria-label="Next"]').click(function() { if (page * records < totalCount) { page++; } fetchData(); }); // data fetching from API function fetchData() { totalCount = fakeData.totalCount; Story.innerHTML = ''; fakeData.data.slice((page - 1) * records, page * records).map((object) => { Story.innerHTML += `<tr> <td>${object.row}</td> <td><a href="#" class="detaillink">${object.name}</a></td> </tr>`; }) renderPagination(); } function renderPagination() { $('.page-item-numbers').remove(); let pagesNumbers = Math.ceil(totalCount / records); for (let i = 1; i <= pagesNumbers; i++) { $(`.pagination > li:nth-child(${i})`).after(`<li class="page-item page-item-numbers ${i == page? 'active': ''}" ><a class="page-link" href="#">${i}</a></li>`); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> </tr> </thead> <tbody id="approvedList"> </tbody> </table> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous" id="Previous"> <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span> </a> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next" id="Next"> <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span> </a> </li> </ul> </nav>