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