限制分页中可见页面的数量
我正在研究一个jQuery分页工具，虽然我有分页工作，但我看到了一个缺陷：
在桌面上有一排14个以上的分页链接是可以的，但对于移动设备来说并不行。 所以我想一次将可见页面的数量限制为5（不包括下一个/上一个按钮），并在它到达第三个可见页面时更新它并更新页面中的可见页面基本上看起来像
| Prev | 1 | ... | 3 | 4 | 5 | 6 | Next | 我写了这个CodePen到目前为止我所拥有的。 我知道有插件可以帮我这么做，但我想避免在这个项目中使用插件。
HTML（示例内容被分页）
HTML（分页元素）
JavaScript的：
"use strict"; //NOTE: the class"page-item page-link" are classes used in bootstrap 4 and will not be seen declared or used outside of the as the bootstrap framework uses those classes to apply CSS //sets number of items and limits the number of items per page var numberOfItems = $("#jar .content").length; var limitPerPage = 2; //as the items start at 0 to keep the items per page at the limitPerPage set in variable, need to subtract 1 as is shown below $("#jar .content:gt(" + (limitPerPage - 1) + ")").hide(); //sets total pages rounded to the next whole number var totalPages = Math.round(numberOfItems / limitPerPage); //append the 1 page to the pagination $(".pagination").append( " " + 1 + " " ); //append the pages in sequential order after prev button (as seen in the html in codepen) for (var i = 2; i <= totalPages; i++) { $(".pagination").append( "" + i + " " ); } //appends the next button link as the final child element in the pagination $(".pagination").append( "Next " ); //When a page is selected, if it has "active" class return false, if no "active" class, go to page and add "active" class attribute and remove from any other element that has "active" on it. $(".pagination li.current-page").on("click", function () { if ($(this).hasClass("active")) { return false; } else { var currentPage = $(this).index(); $(".pagination li").removeClass("active"); $(this).addClass("active"); $("#jar .content").hide(); //.hide will hide content that does not fit into that page (ie 0 and 1 on page one, 2 and 3 on page two and so on will show on appropriate page) If it does not fall within the range for that page .hide, if it falls within the range .show content var grandTotal = limitPerPage * currentPage; for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { $("#jar .content:eq(" + i + ")").show(); } } }); //when next is clicked if it is on the last page, return false otherwise move on to next page in pagination and remove "active" class from previous page and add "active" class to new page $("#next-page").on("click", function () { var currentPage = $(".pagination li.active").index(); if (currentPage === totalPages) { return false; } else { currentPage++; $(".pagination li").removeClass("active"); $("#jar .content").hide(); var grandTotal = limitPerPage * currentPage; for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { $("#jar .content:eq(" + i + ")").show(); } $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass( "active" ); } }); //when prev is clicked if it is on the 1 page, return false otherwise move on to previous page and remove "active" class from last page visited and add "active" class to new page $("#previous-page").on("click", function () { var currentPage = $(".pagination li.active").index(); if (currentPage === 1) { return false; } else { currentPage--; $(".pagination li").removeClass("active"); $("#jar .content").hide(); var grandTotal = limitPerPage * currentPage; for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { $("#jar .content:eq(" + i + ")").show(); } $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass( "active" ); } });
我建议使用一个函数 – 给定当前页码，总页数和你想要的最大按钮数 – 将返回一个数字数组，其中0表示一个...按钮，并且其他数字表示可点击的页面按钮。
该function将完成计算应该放置的位置的艰苦工作，但是一旦你有了它，将它与你的页面集成是一件小事。
这是一个将按钮数量（不包括prev / next，包括...按钮）限制为7的示例。如果您愿意，可以将该参数减少为5：
// Returns an array of maxLength (or less) page numbers // where a 0 in the returned array denotes a gap in the series. // Parameters: // totalPages: total number of pages // page: current page // maxLength: maximum size of returned array function getPageList(totalPages, page, maxLength) { if (maxLength < 5) throw "maxLength must be at least 5"; function range(start, end) { return Array.from(Array(end - start + 1), (_, i) => i + start); } var sideWidth = maxLength < 9 ? 1 : 2; var leftWidth = (maxLength - sideWidth*2 - 3) >> 1; var rightWidth = (maxLength - sideWidth*2 - 2) >> 1; if (totalPages <= maxLength) { // no breaks in list return range(1, totalPages); } if (page <= maxLength - sideWidth - 1 - rightWidth) { // no break on left of page return range(1, maxLength-sideWidth-1) .concat([0]) .concat(range(totalPages-sideWidth+1, totalPages)); } if (page >= totalPages - sideWidth - 1 - rightWidth) { // no break on right of page return range(1, sideWidth) .concat([0]) .concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages)); } // Breaks on both sides return range(1, sideWidth) .concat([0]) .concat(range(page - leftWidth, page + rightWidth)) .concat([0]) .concat(range(totalPages-sideWidth+1, totalPages)); } $(function () { // Number of items and limits the number of items per page var numberOfItems = $("#jar .content").length; var limitPerPage = 2; // Total pages rounded upwards var totalPages = Math.ceil(numberOfItems / limitPerPage); // Number of buttons at the top, not counting prev/next, // but including the dotted buttons. // Must be at least 5: var paginationSize = 7; var currentPage; function showPage(whichPage) { if (whichPage < 1 || whichPage > totalPages) return false; currentPage = whichPage; $("#jar .content").hide() .slice((currentPage-1) * limitPerPage, currentPage * limitPerPage).show(); // Replace the navigation items (not prev/next): $(".pagination li").slice(1, -1).remove(); getPageList(totalPages, currentPage, paginationSize).forEach( item => { $("").addClass("page-item") .addClass(item ? "current-page" : "disabled") .toggleClass("active", item === currentPage).append( $("").addClass("page-link").attr({ href: "javascript:void(0)"}).text(item || "...") ).insertBefore("#next-page"); }); // Disable prev/next when at first/last page: $("#previous-page").toggleClass("disabled", currentPage === 1); $("#next-page").toggleClass("disabled", currentPage === totalPages); return true; } // Include the prev/next buttons: $(".pagination").append( $("").addClass("page-item").attr({ id: "previous-page" }).append( $("").addClass("page-link").attr({ href: "javascript:void(0)"}).text("Prev") ), $("").addClass("page-item").attr({ id: "next-page" }).append( $("").addClass("page-link").attr({ href: "javascript:void(0)"}).text("Next") ) ); // Show the page links $("#jar").show(); showPage(1); // Use event delegation, as these items are recreated later $(document).on("click", ".pagination li.current-page:not(.active)", function () { return showPage(+$(this).text()); }); $("#next-page").on("click", function () { return showPage(currentPage+1); }); $("#previous-page").on("click", function () { return showPage(currentPage-1); }); });