限制分页中的可见页面数 [英] Limit the number of visible pages in pagination

问题描述

我正在使用jQuery分页工具，并且在进行分页时，我发现了一个缺陷:

I'm working on a jQuery pagination tool, and while I have the pagination working, I see a flaw:

在台式机上具有14个以上的分页链接行是可以的，但对于移动设备而言则不行.因此，我想一次将可见页面的数量限制为5(不包括下一个/上一个"按钮)，并使其在到达第三可见页面时进行更新，并在分页中更新可见页面，本质上类似于

Having a row of 14+ pagination links is fine on a desktop, but it is not OK for a mobile device. So I want to limit the number of visible pages to 5 at a time (not including the next/prev buttons) and have it update when it reaches the third visible page and update the visible pages in the pagination essentially looking like

| Prev | 1 | ... | 3 | 4 | 5 | 6 | Next |

我已经写了到目前为止的此CodePen .我知道有一些插件可以为我完成此操作，但我想避免在此项目中使用插件.

I've written this CodePen of what I have so far. I'm aware there are plug-ins that do this for me but I want to avoid using plug-ins for this project.

HTML(正在对示例内容进行分页)

HTML (example content being paginated)

<div class="container" id="jar">
    <div class="row content">
         <div class="col">
              <img src="http://via.placeholder.com/350x150">
         </div>
         <div class="col">
             <img src="http://via.placeholder.com/350x150">
         </div>
    </div>
</div>

HTML(分页元素)

HTML (pagination element)

 <nav>
   <ul class="pagination justify-content-center pagination-sm">
     <li id="previous-page" class="page-item"><a class="page-link" href="javascript:void(0)">Prev</a>
     </li>
   </ul>
 </nav>

JavaScript:

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 <li> 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(
        "<li class='page-item current-page active'><a class='page-link'  href='javascript:void(0)'>" +
        1 +
        "</a></li>"
        );

//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(
            "<li class='page-item current-page'><a class='page-link' href='javascript:void(0)'>" +
            i +
            "</a></li>"
            );
}

//appends the next button link as the final child element in the pagination

$(".pagination").append(
        "<li class='page-item' id='next-page'><a class='page-link' href='javascript:void(0)'>Next</a></li>"
        );

//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表示 ... 按钮，其他数字表示可点击的页面按钮.

I would suggest using a function that -- given a current page number, the total number of pages, and the maximum number of buttons you want to have -- will return an array of numbers, where 0 denotes a ... button, and other numbers denote clickable page buttons.

例如，它可能返回:

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

...这将代表以下按钮:

...which would represent the following buttons:

1 ， 2 ， ... ， 5 ， 6 ， 7 ， ... ， 10 ， 11

1, 2, ..., 5, 6, 7, ..., 10, 11

该函数将完成计算那些 ... 应该放置在何处的艰巨工作，但是一旦有了它，将其与您的页面集成起来就是小菜一碟.

That function will do the hard work of calculating where those ... should be placed, but once you have that, it is a piece of cake to integrate it with your page.

在此示例中，将按钮的数量(不包括 prev / next ，包括 ... 按钮)限制为7个.如果愿意，可以将该参数减小为5:

Here is an example that will limit the number of buttons (excluding prev/next, including ... buttons) to 7. You can reduce that parameter to 5 if you like:

// 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, range(totalPages - sideWidth + 1, totalPages));
    }
    if (page >= totalPages - sideWidth - 1 - rightWidth) {
        // no break on right of page
        return range(1, sideWidth)
            .concat(0, range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
    }
    // Breaks on both sides
    return range(1, sideWidth)
        .concat(0, range(page - leftWidth, page + rightWidth),
                0, range(totalPages - sideWidth + 1, totalPages));
}

// Below is an example use of the above function.
$(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 => {
            $("<li>").addClass("page-item")
                     .addClass(item ? "current-page" : "disabled")
                     .toggleClass("active", item === currentPage).append(
                $("<a>").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(
        $("<li>").addClass("page-item").attr({ id: "previous-page" }).append(
            $("<a>").addClass("page-link").attr({
                href: "javascript:void(0)"}).text("Prev")
        ),
        $("<li>").addClass("page-item").attr({ id: "next-page" }).append(
            $("<a>").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);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="pagination">
</div>

<div id="jar" style="display:none">
    <div class="content">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">2) Maecenas vitae elit arcu.</div>
    <div class="content">3) Pellentesque sagittis risus ac ante ultricies, ac convallis urna elementum.</div>
    <div class="content">4) Vivamus sodales aliquam massa quis lobortis. </div>
    <div class="content">5) Phasellus id sem sollicitudin lacus condimentum malesuada vel tincidunt neque.</div>
    <div class="content">6) Donec magna leo, rhoncus quis nunc eu, malesuada consectetur orci.</div>
    <div class="content">7) Praesent sollicitudin, quam a ullamcorper pharetra, urna lacus mollis sem, quis semper augue massa ac est.</div>
    <div class="content">8) Etiam leo magna, fermentum quis quam non, aliquam tincidunt erat.</div>
    <div class="content">9) Morbi pellentesque nibh nec nibh posuere, vel tempor magna dignissim.</div>
    <div class="content">10) In maximus fermentum elementum. Vestibulum ac lectus pretium, suscipit ante nec, bibendum erat.</div>
    <div class="content">11) Phasellus sit amet orci at lectus fermentum congue. Etiam faucibus scelerisque purus.</div>
    <div class="content">12) Pellentesque laoreet ipsum ac laoreet consectetur. </div>
    <div class="content">13) Integer aliquet odio magna, lobortis mattis tortor suscipit sed.</div>
    <div class="content">14) Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
    <div class="content">15) Mauris a tellus luctus turpis elementum imperdiet vitae malesuada mauris. </div>
    <div class="content">16) Donec id libero sagittis, laoreet lorem vel, tempus nunc. </div>
    <div class="content">17) Donec vitae neque sed ex tristique hendrerit.</div>
    <div class="content">18) Aliquam sollicitudin gravida varius.</div>
    <div class="content">19) Donec auctor, augue sed finibus fermentum, neque erat interdum libero, eget porta metus lectus quis odio.</div>
    <div class="content">20) Nunc quis ante enim. Etiam nisl orci, hendrerit ut pretium nec, tempor in metus.</div>
    <div class="content">21) Donec et semper arcu.</div>
    <div class="content">22) Donec lobortis interdum purus, eu semper nisl pulvinar ac.</div>
    <div class="content">23) Cras laoreet eu elit vel porta.</div>
    <div class="content">24) Quisque pharetra arcu eget diam posuere commodo.</div>
    <div class="content">25) Nulla ornare eleifend neque, eget tincidunt nunc ullamcorper id. Nulla facilisi.</div>
</div>

这篇关于限制分页中的可见页面数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！