how to add dots(ellipses) in between the pagination numbers in jquery

Question

I have a pre-generated html for the pagination numbers , which basically comes from the backend CMS based on the number of items present the html looks something like this

<p class="pagination-numbers">
  <a class="" href="/content/go2bank/en/blogs/blog-list-page-1.html"> 1 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.2.html"> 2 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.3.html"> 3 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.4.html"> 4 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.5.html"> 5 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.6.html" class="active"> 6 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.7.html"> 7 </a>
</p>

the number of pages may increase based on the number of items, so currently the numbers are displaying all (eg: 1 2 3 4 5 6 7)

I want this to not display all the numbers but display a few i.e a first few and replace the rest with '...' and the last one should be displayed.

i want the pagination to look and behave like this something like this

Selected page 1: [1, 2, 3, 4, "...", 20]
selected page 2: [1, 2, 3, 4, "...", 20]
selected page 3: [1, 2, 3, 4, "...", 20]
selected page 4: [1, "...", 3, 4, 5, "...", 20]
selected page 5: [1, "...", 4, 5, 6, "...", 20]
.
.
.
.
.
selected page 18:[1, "...", 17, 18 ,19 , 20]
selected page 19:[1, "...", 17, 18 ,19 , 20]
selected page 20:[1, "...", 17, 18 ,19 , 20]

thanks in advance

Answer 1

Based on the assumption you know how to set the current page, and know how you wish to trigger the paginator...

// How many pages can be around the current page
let maxAround = 1;
// How many pages are displayed if in beginning or end range
let maxRange = 3;
// The current page (pass this however you like)
let currentPage = 2;

// The paginator (would suggest using an ID instead)
let $paginator = $('.pagination-numbers');

$(document).ready(function () {
    // Upon page load, we want to set the visible pages
    updateVisiblePages();
});

function updateVisiblePages() {
    // Count amount of pages
    let totalPages = $paginator.children('a').length;
    let endRange = totalPages - maxRange;
    // Check if we're in the starting section
    let inStartRange = currentPage <= maxRange;
    // Check if we're in the ending section
    let inEndRange = currentPage >= endRange;

    // We need this for the span(s)
    let lastDotIndex = -1;

    // Remove all dots
    $('span.dots').remove();
    // Loop the pages
    $paginator.children('a').each(function (page, element) {
        // Index starts at 0, pages at 1
        ++page;
        let $element = $(element);
        if (page === 1 || page === totalPages) {
            // Always show first and last
            $element.show();
        } else if (inStartRange && page <= maxRange) {
            // Show element if in start range
            $element.show();
        } else if (inEndRange && page >= endRange) {
            // Show the element if in ending range
            $element.show();
        } else if (page === currentPage - maxAround || page === currentPage || page === currentPage + maxAround) {
            // Show element if in the wrap around
            $element.show();
        } else {
            // Doesn't validate, hide it.
            // Append dot if needed
            $element.hide();

            if (lastDotIndex === -1 || (! inStartRange && ! inEndRange && $('span.dots').length < 2 && page > currentPage)) {
                lastDotIndex = page;
                // Insert dots after this page, we only have one or 2, and we can only insert the second one
                // if we're not in the start or end range, and it's past the current page
                $element.after('<span class="dots">...</span>');
            }
        }
    });
}

This might not be the cleanest solution, but it is fully functional and works pretty fast within my testing. You can change the currentPage number and recall the function and it will change the pagination to the new currentPage.

Answer 2

Something like this?

const act = $(".pagination-numbers a.active").index()
$(".pagination-numbers a:visible").each(function() {$(this).after('<span>.</span>') })
$(".pagination-numbers a:lt("+(act-1)+")").hide(); // one before 
$(".pagination-numbers a:gt("+(act+1)+")").hide(); // one after


$(".pagination-numbers a:first").show()
$(".pagination-numbers a:last").show()
$(".pagination-numbers span:last").hide()

a { text-decoration: none }
.active {font-weight: bold }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="pagination-numbers">
  <a class="" href="/content/go2bank/en/blogs/blog-list-page-1.html"> 1 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.2.html"> 2 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.3.html"> 3 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.4.html"> 4 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.5.html"> 5 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.6.html"> 6 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.7.html" class="active"> 7 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.8.html"> 8 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.9.html"> 9 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.10.html"> 10 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.11.html"> 11 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.12.html"> 12 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.13.html"> 13 </a>
</p>