pro-paginate

A open source pagination plugin using pure Javascript.

Installation

To start using it straight away, place this in the head of your HTML code:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/src/style/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/paginate.es5.js"></script>

Using a JavaScript package manager

If you use the npm package manager, you can fetch a local copy of pro-paginate by running:

npm install pro-paginate

You will find a copy of the pro-paginate release files in node_modules/pro-paginate/src.

Usage Guide

ProPaginate Class

ProPaginate class is to make the most modern pagination. This allows to make pagination for monthly data.

ProPaginate Class Usage Example

Here is the default creation of ProPaginate:

<div id="paginate"></div>

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    const example_1 = new ProPaginate()
  }
}

You can do the customization and change the default settings providing the option object as parameter of ProPaginate class

<div id="paginate-2"></div>

const dummyData = [
  {
    month: 'jan',
    data: [
      {
        _date: 'Jan 20',
        location: 'Chattagram'
      }
    ]
  },
  {
    month: 'feb',
    data: [
      {
        _date: 'feb 20',
        location: 'Chattagram'
      }
    ]
  },
  {
    month: 'march',
    data: [
      {
        _date: 'march 12',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'apr',
    data: [
      {
        _date: 'apr 12',
        location: 'Dhaka'
      },
      {
        _date: 'apr 32',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'may',
    data: [
      {
        _date: 'may 5',
        location: 'Dhaka'
      },
      {
        _date: 'may 25',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'jun',
    data: [
      {
        _date: 'jun 4',
        location: 'Dhaka'
      },
      {
        _date: 'jun 24',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'jul',
    data: [
      {
        _date: 'jul 5',
        location: 'Dhaka'
      },
      {
        _date: 'jul 3',
        location: 'Dhaka'
      },
      {
        _date: 'jul 25',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'aug',
    data: [
      {
        _date: 'aug 4',
        location: 'Dhaka'
      },
      {
        _date: 'aug 3',
        location: 'Dhaka'
      },
      {
        _date: 'aug 11',
        location: 'Dhaka'
      },
      {
        _date: 'aug 13',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'sep',
    data: [
      {
        _date: 'sep 3',
        location: 'Dhaka'
      },
      {
        _date: 'sep 2',
        location: 'Dhaka'
      },
      {
        _date: 'sep 6',
        location: 'Dhaka'
      },
      {
        _date: 'sep 6',
        location: 'Dhaka'
      },
      {
        _date: 'sep 5',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'oct',
    data: [
      {
        _date: 'oct 3',
        location: 'Dhaka'
      },
      {
        _date: 'oct 23',
        location: 'Dhaka'
      },
      {
        _date: 'oct 13',
        location: 'Dhaka'
      },
      {
        _date: 'oct 23',
        location: 'Dhaka'
      },
      {
        _date: 'oct 3',
        location: 'Dhaka'
      },
      {
        _date: 'oct 13',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'nov',
    data: [
      {
        _date: 'nov 2',
        location: 'Dhaka'
      },
      {
        _date: 'nov 2',
        location: 'Dhaka'
      },
      {
        _date: 'nov 22',
        location: 'Dhaka'
      },
      {
        _date: 'nov 2',
        location: 'Dhaka'
      },
      {
        _date: 'nov 22',
        location: 'Dhaka'
      },
      {
        _date: 'nov 22',
        location: 'Dhaka'
      },
      {
        _date: 'nov 2',
        location: 'Dhaka'
      },
      {
        _date: 'nov 22',
        location: 'Dhaka'
      },
      {
        _date: 'nov 2',
        location: 'Dhaka'
      }
    ]
  },
  {
    month: 'dec',
    data: [
      {
        _date: 'dec 5',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 16',
        location: 'Dhaka'
      },
      {
        _date: 'dec 5',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 16',
        location: 'Dhaka'
      },
      {
        _date: 'dec 5',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 5',
        location: 'Dhaka'
      },
      {
        _date: 'dec 16',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 16',
        location: 'Dhaka'
      },
      {
        _date: 'dec 16',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 5',
        location: 'Dhaka'
      },
      {
        _date: 'dec 15',
        location: 'Dhaka'
      },
      {
        _date: 'dec 5',
        location: 'Dhaka'
      }
    ]
  }
]

let currentMonth = new Date().getMonth()
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    const example_1 = new ProPaginate({
      data: dummyData,
      startpageNum: currentMonth,
      pageLinkAreaLabel: [
        'jan',
        'feb',
        'mar',
        'apr',
        'may',
        'jun',
        'jul',
        'aug',
        'sep',
        'oct',
        'nov',
        'dec'
      ],
      dataItemHtml:
        '<div class="data_item"><div class="data_item_details"><span class="data_item_date">${paginateDataObj._date == "Jan 20" ? "hello" : "hello world"}</span><span class="data_item_location">${paginateDataObj.location}</span></div></div>',

      dataItemsArrayPath: 'data'
    })
  }
}

Creation

Factory	Description
new ProPaginate( options?)	Instantiates a ProPaginate object optionally given an object literal with ProPaginate options.

Options

Option	Type	Default	Description
mainContainerSelector	String	'#paginate'	The pagination wrapper section selector. any kind of css selector is excapted but id is recomended as the value.
data	Array	'this.#dummyData'	Array containing all data to show and paginate.
dataItemsArrayPath	String	'data'	Path from where the loop should be done in data array.
dataItemHtml	String	''	Html element to render as every page items. Please provide the property of the object like _date, location to show data on every items.
showAlldataOnce	Boolean	false	Determine all items should be shown once or not.
visibleDataonce	integer	5	The number of items that will show at once.
showMoreAreaLabel	String	'Show More'	Area label for show more items button.
mainDataArrayEmptyErrorHtml	String	''	Html element to show when the Data Array is empty.
singleDataItemArrayEmptyErrorHtml	String	''	Html element to show when a single item of the data Array is empty.

Options inherited from Paginate class

Option	Type	Default	Description
itemsContainerClass	String	'.items_container'	The items' container custom class.
paginationSelector	String	'.pagination'	The pagination' container selector. can be any valid css selector.
paginationContainerClass	String	'.pagination_container'	The pagination container custom class.
itemsView	String	'row_view'	Determine The way all items should be presented, value can be eather row_view or column_view.
pageLinksToDisplay	integer	10	The number of page links to display at once. All other pages will be hidden or replaced with ...
startpageNum	integer	0	The first page to show. To show page 3, the value will be 2
visiblePageCount	integer	4	Total page to show once in pagination. To show 5 page once in pagination, the value will be 5
wrapAround	Boolean	false	Determine if the pages should loop or not.
firstAreaLabel	String	'First'	The aria label for the first control.
prevAreaLabel	String	'Prev'	The aria label for the previous control.
nextAreaLabel	String	'Next'	The aria label for the next control.
lastAreaLabel	String	'Last'	The aria label for the last control.
paginationOrder	Array	["first", "prev", "num", "next", "last"]	The order of the controls. 'num' represents the page links.
showFirstLast	Boolean	false	Determine if the first and last controls will show or not.
showPrevNext	Boolean	true	Determine if the previous and next controls will show or not.
hasEllips	Boolean	true	Determine if the less Ellips and more hasEllips will show or not.
hideOnSmall	Boolean	false	Determine if the pagination shows when the number of items is smaller than the number of items per page.
defaultClass	String	'defaultclass'	A class to apply to all control elements.
activeClass	String	'active'	A class to apply to the active page link.
disabledClass	String	'disabled'	A class to apply to disabled controls.
pageLinkAreaLabel	Array	[]	Array of text to show as arealabel of page links.

Methods inherited from Paginate class

Method	Type	Default	Description
onPageDisplayed	Function	false	Callback to be run once a page is displayed.
onLinkClick	Function	false	Callback to be run once the user click on any specific page link.
onFirstClick	Function	false	Callback to be run once the user click on the first link.
onLastClick	Function	false	Callback to be run once the user click on the last link.
onPrevClick	Function	false	Callback to be run once the user click on the prev link.
onNextClick	Function	false	Callback to be run once the user click on the next link.
onMoreClick	Function	false	Callback to be run once the user click on the more link.
onLessClick	Function	false	Callback to be run once the user click on the less link.
onDataUpdate	Function	false	Callback to be run once the data has been updated.
onUpdatedDataRander	Function	false	Callback to be run once the data has been randered.
onCurrentPageChange	Function	false	Callback to be run every time the Current Page index Change.
onPageRender	Function	false	Callback to be run every time the page render.

Browser Support

When using the Ecmascript 5 version, supports goes all the way back to Internet Explorer 10. I have used Babel to convert the code into Ecmascript 5 compatible code.

License

MIT License See LICENSE.txt