Customizable Pagination jQuery Plugin For Materialize Framework

Materialize Pagination is a simple jQuery plugin used to render a dynamic, fully configurable pagination component for Materialize Material Design CSS framework.

How to use it:

1. Import Google Icon Font and materialize.css into your html file.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

2. Create an element to place the dynamic pagination component.

<div id="example"></div>

3. The JavaScript to render a basic pagination with specific start/end pages.

$('#example').materializePagination({
  lastPage: 100,
  firstPage:  1,
});

4. Change the default pagination alignment within its parent container.

$('#example').materializePagination({
  lastPage: 100,
  firstPage:  1,
  align: 'left', //  center, left and right
});

5. The url parameter options.

$('#example').materializePagination({
  lastPage: 100,
  firstPage:  1,
  align: 'left', 
  urlParameter: 'page',
  useUrlParameter: true
});

6. Execute a callback function after clicking.

$('#example').materializePagination({
  lastPage: 100,
  firstPage:  1,
  align: 'left', 
  urlParameter: 'page',
  useUrlParameter: true,
  onClickCallback: function(){}
});

Change log:

2017-07-29

• Fix issues with materialize v0.100 and onClickcallback

2016-05-26

• Add class=disabled to ellipsis page component

2016-04-26

• Fix bug when two or more pagination components use url parameters to keep track of their respective states

---

This awesome jQuery plugin is developed by mirjamsk. For more Advanced Usages, please check the demo page or visit the official website.