js:Simple pagination in javascript

发布时间 2023-09-07 15:59:19作者: katesharing

https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<div id="listingTable"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a>
page: <span id="page"></span>

<script>
    var current_page = 1;
    var records_per_page = 2;

    var objJson = [
        { adName: "AdName 1" },
        { adName: "AdName 2" },
        { adName: "AdName 3" },
        { adName: "AdName 4" },
        { adName: "AdName 5" },
        { adName: "AdName 6" },
        { adName: "AdName 7" },
        { adName: "AdName 8" },
        { adName: "AdName 9" },
        { adName: "AdName 10" }
    ]; // Can be obtained from another source, such as your objJson variable

    function prevPage() {
        if (current_page > 1) {
            current_page--;
            changePage(current_page);
        }
    }

    function nextPage() {
        if (current_page < numPages()) {
            current_page++;
            changePage(current_page);
        }
    }

    function changePage(page) {
        var btn_next = document.getElementById("btn_next");
        var btn_prev = document.getElementById("btn_prev");
        var listing_table = document.getElementById("listingTable");
        var page_span = document.getElementById("page");

        // Validate page
        if (page < 1) page = 1;
        if (page > numPages()) page = numPages();

        listing_table.innerHTML = "";

        for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {
            listing_table.innerHTML += objJson[i].adName + "<br>";
        }
        page_span.innerHTML = page;

        if (page == 1) {
            btn_prev.style.visibility = "hidden";
        } else {
            btn_prev.style.visibility = "visible";
        }

        if (page == numPages()) {
            btn_next.style.visibility = "hidden";
        } else {
            btn_next.style.visibility = "visible";
        }
    }

    function numPages() {
        return Math.ceil(objJson.length / records_per_page);
    }

    window.onload = function () {
        changePage(1);
    };
</script>

测试结果:

项目代码:

WebApplication1/JSPagination