Pagination

Create pagination items model

Quickly create pagination items via vanilla javascript and no dependency required.

Usage

import createPagination from 'ab-pagination';

createPagination will return an array of pagination items and each item is an object with type and page property.

/*
  createPagination(current, limit, total, [visibleNeighbors = 2])
*/
const items = createPagination(2, 5, 27);

// [{type: "prev", page: 1}, {type: "anchor", page: 1}, {type: "anchor", page: 2}, {type: "anchor", page: 3}, {type: "anchor", page: 4}, {type: "gap"}, {type: "last", page: 6}, {type: "next", page: 3}] (8)

Item Type

Item type could be one of this below:

• prev
• first
• anchor
• last
• next
• gap

Render Pagination

function renderPagination(items)
{
  let pagination = '<ul>';

  items.forEach(item => {
  
    pagination += '<li>';
  
    switch(item.type)
    {
      case 'gap':
        pagination += '<i>...</i>';
        break;
      
      case 'prev':
      case 'next':
        pagination += '<a href="?page=' + item.page + '">' + item.type + '</a>';
        break;
    
      case 'anchor':
      case 'first':
      case 'last':
      default:
        pagination += '<a href="?page=' + item.page + '">' + item.page + '</a>';
        break;
    }
  
    pagination += '</li>';
  });
  
  return pagination;
}

const items = createPagination(2, 5, 27);
document.querySelector('.pagination').innerHTML = renderPagination(items);