range pagination

Benchmark created on July 4, 2024

Setup

const ellipsis = '...';
const generatePaginationArray = (pageNumber, totalPages) => {
    const pages = [1];
    let rangeStart = Math.max(2, pageNumber - 1);
    let rangeEnd = totalPages <= 4 ? totalPages - 1 : Math.min(totalPages - 1, pageNumber + 1);
    if (pageNumber === 2) {
        rangeEnd = Math.min(3, totalPages - 1);
    }
    if (pageNumber === totalPages - 1) {
        rangeStart = Math.max(totalPages - 3, 2);
    }
    // Add start of range or ellipsis
    if (rangeStart > 3 || (rangeStart === 3 && pageNumber === 5)) {
        pages.push(ellipsis);
        if (rangeStart >= totalPages - 3 && pageNumber - 1 > rangeStart) {
            rangeStart++;
        }
    } else if (rangeStart === 3) {
        pages.push(2);
    }
    // Add range of pages
    for (let i = rangeStart; i <= rangeEnd; i++) {
        pages.push(i);
    }
    // Add end of range or ellipsis
    if (rangeEnd < totalPages - 1) {
        const withinSightOfEnd = (rangeEnd === totalPages - 2);
        pages.push(withinSightOfEnd ? totalPages - 1 : ellipsis);
    }
    // Always add the last page if more than one page
    if (totalPages > 1) {
        pages.push(totalPages);
    }
    return pages;
};

const ELLIPSIS_MARKER = '...';
const generatePaginationArray2 = (pageNumber, totalPages, ellipsis = ELLIPSIS_MARKER) => {
    const pages = [];
    for (let i = 1; i <= totalPages; i++) {
        const firstOrLast = (i === 1 || i === totalPages);
        const prevNextOrCurrent = (i >= pageNumber - 1 && i <= pageNumber + 1);
        const nearStart = (i === 2 && pageNumber <= 4);
        const nearEnd = (i === totalPages - 1 && pageNumber >= totalPages - 3);
        if (firstOrLast || prevNextOrCurrent || nearStart || nearEnd) {
            pages.push(i);
        } else if (pages[pages.length - 1] !== ellipsis) { // prevent multiple ellipsis in a row
            pages.push(ellipsis);
        }
    }
    return pages;
};

Test runner

generatePaginationArray(1, 10000);

generatePaginationArray2(1, 10000);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on July 4, 2024