DataTable Pager - Numbers with Ellipses - 1 ... 4 5 6 ... 50 Previous Next

datatables.paging.js

$.fn.DataTable.ext.pager.numbersWithEllipses = function (page, pages) {
    if (pages === 1) {
        return [];
    }

    var numbers      = [],
        buttons      = 3,
        withEllipses = true;

    var range = function (len, start) {
        var end;

        if (typeof start === 'undefined') {
            start = 0;
            end   = len;
        } else {
            end   = start;
            start = len;
        }

        var out = [];
        for (var i = start; i < end; i++) {
            out.push(i);
        }

        return out;
    };


    if (pages <= buttons) {
        numbers = range(0, pages);
    } else if (page <= 1) {
        numbers = range(0, buttons);
    } else if (page >= pages - 2) {
        numbers = range(pages - buttons, pages);
    } else {
        numbers = range(page - 1, page + 2);
    }

    // eslint-disable-next-line camelcase
    numbers.DT_el = 'span';

    if (pages > 0) {
        if (!numbers.includes(0)) {
            if (numbers[0] > 2) {
                if (withEllipses) {
                    numbers.unshift('ellipsis');
                }
            } else if (numbers[0] > 1) {
                numbers.unshift(1);
            }

            numbers.unshift(0);
        }

        if (!numbers.includes(pages - 1)) {
            if (numbers.slice(-1)[0] < pages - 2) {
                if (numbers.slice(-1)[0] === pages - 3) {
                    numbers.push(pages - 2);
                } else {
                    if (withEllipses) {
                        numbers.push('ellipsis');
                    }
                }
            }

            numbers.push(pages - 1);
        }

        numbers.push('previous');
        numbers.push('next');
    }

    return numbers;
};

101 UX Principles - Chapter #18 - If Your Content Has a Beginning, Middle, and End, Use Pagination