Simple pagination algorithm

simple-pagination.js

// Implementation in ES6
function pagination(c, m) {
    var current = c,
        last = m,
        delta = 2,
        left = current - delta,
        right = current + delta + 1,
        range = [],
        rangeWithDots = [],
        l;

    for (let i = 1; i <= last; i++) {
        if (i == 1 || i == last || i >= left && i < right) {
            range.push(i);
        }
    }

    for (let i of range) {
        if (l) {
            if (i - l === 2) {
                rangeWithDots.push(l + 1);
            } else if (i - l !== 1) {
                rangeWithDots.push('...');
            }
        }
        rangeWithDots.push(i);
        l = i;
    }

    return rangeWithDots;
}

/* 
Test it:

for (let i = 1, l = 20; i <= l; i++)
    console.log(`Selected page ${i}:`, pagination(i, l));

Expected output:

Selected page 1: [1, 2, 3, "...", 20]
Selected page 2: [1, 2, 3, 4, "...", 20]
Selected page 3: [1, 2, 3, 4, 5, "...", 20]
Selected page 4: [1, 2, 3, 4, 5, 6, "...", 20]
Selected page 5: [1, 2, 3, 4, 5, 6, 7, "...", 20]
Selected page 6: [1, "...", 4, 5, 6, 7, 8, "...", 20]
Selected page 7: [1, "...", 5, 6, 7, 8, 9, "...", 20]
Selected page 8: [1, "...", 6, 7, 8, 9, 10, "...", 20]
Selected page 9: [1, "...", 7, 8, 9, 10, 11, "...", 20]
Selected page 10: [1, "...", 8, 9, 10, 11, 12, "...", 20]
Selected page 11: [1, "...", 9, 10, 11, 12, 13, "...", 20]
Selected page 12: [1, "...", 10, 11, 12, 13, 14, "...", 20]
Selected page 13: [1, "...", 11, 12, 13, 14, 15, "...", 20]
Selected page 14: [1, "...", 12, 13, 14, 15, 16, "...", 20]
Selected page 15: [1, "...", 13, 14, 15, 16, 17, "...", 20]
Selected page 16: [1, "...", 14, 15, 16, 17, 18, 19, 20]
Selected page 17: [1, "...", 15, 16, 17, 18, 19, 20]
Selected page 18: [1, "...", 16, 17, 18, 19, 20]
Selected page 19: [1, "...", 17, 18, 19, 20]
Selected page 20: [1, "...", 18, 19, 20]
*/

@narthur version is great. However, it does not catch the case when there is only one page.

If you are having that issue, add this code at the beginning of the function.

if (total === 1) {
    return [1];
}

Updated for ES6, deleted unused variables, customizable delta, first and last arrows, doesn't break if 1 page, and highlight the current page:

function pagination(current, last, delta = 2) {
  if (last === 1) return [1];

  const left = current - delta,
    right = current + delta + 1,
    range = [];

  if (last > 1 && current !== 1) {
    range.push("<");
  }

  for (let i = 1; i <= last; i++) {
    if (i == 1 || i == last || (i >= left && i < right)) {
      if (i === left && i > 2) {
        range.push("...");
      }

      if (i === current) {
        range.push("*" + i + "*");
      } else {
        range.push(i);
      }

      if (i === right - 1 && i < last - 1) {
        range.push("...");
      }
    }
  }

  if (last > 1 && current !== last) {
    range.push(">");
  }

  return range;
}

for (let i = 1, l = 20; i <= l; i++)
  console.log(`Selected page ${i}:`, pagination(i, l));

Thanks a lot sir

Thank you for sharing. I made a few changes and checks:

// The code is based on https://gist.github.com/kottenator/9d936eb3e4e3c3e02598#gistcomment-3238804

type PageItem = number | "...";

export const getRange = (start: number, end: number): PageItem[] => {
  if (end < start) throw Error(`End number must be higher then start number: start ${start}, end ${start}`);

  const rangeLength = end - start + 1;
  return Array(rangeLength)
    .fill(0)
    .map((_, i) => i + start);
};

const clamp = (value: number, lower: number, upper: number) => Math.min(Math.max(value, lower), upper);

export const calculatePages = (currentPage: number, pageCount: number, size: number): PageItem[] => {
  if (pageCount < 1) {
    console.warn("Page count has negative value. Returning empty array.");
    return [];
  }

  if (currentPage < 1) {
    console.warn("Current page has negative value. Current page will be set to 1");
    currentPage = 1;
  }

  if (currentPage > pageCount) {
    console.warn("Current page is higher than page count. Current page will be set to page count:", pageCount);
    currentPage = pageCount;
  }

  if (size % 2 === 0) {
    console.warn("The size must be odd. The size will be increased by 1");
    size += 1;
  }

  if (size < 5) {
    console.warn("The minimum size is 5. The size will be increased to 5");
    size = 5;
  }

  const offset = (size - 1) / 2;
  const shouldAddDots = pageCount > size;

  const rangeConfig = {
    start: clamp(currentPage - offset, 1, shouldAddDots ? pageCount - size + 1 : 1),
    end: clamp(currentPage + offset, size, pageCount),
  };

  const pages = getRange(rangeConfig.start, rangeConfig.end);

  if (shouldAddDots && pages[0] !== 1) {
    pages[0] = 1;
    pages[1] = "...";
  }
  if (shouldAddDots && pages[pages.length - 1] !== pageCount) {
    pages[pages.length - 1] = pageCount;
    pages[pages.length - 2] = "...";
  }
  return pages;
};

example of the output for size 5:

[
  [1, [1, 2, 3, "...", 20]],
  [2, [1, 2, 3, "...", 20]],
  [3, [1, 2, 3, "...", 20]],
  [4, [1, "...", 4, "...", 20]],
  [5, [1, "...", 5, "...", 20]],
  [6, [1, "...", 6, "...", 20]],
  [7, [1, "...", 7, "...", 20]],
  [8, [1, "...", 8, "...", 20]],
  [9, [1, "...", 9, "...", 20]],
  [10, [1, "...", 10, "...", 20]],
  [11, [1, "...", 11, "...", 20]],
  [12, [1, "...", 12, "...", 20]],
  [13, [1, "...", 13, "...", 20]],
  [14, [1, "...", 14, "...", 20]],
  [15, [1, "...", 15, "...", 20]],
  [16, [1, "...", 16, "...", 20]],
  [17, [1, "...", 17, "...", 20]],
  [18, [1, "...", 18, 19, 20]],
  [19, [1, "...", 18, 19, 20]],
  [20, [1, "...", 18, 19, 20]],
];

The code with test is available in my gist too.