Easy Table Pagination Plugin For Materialize - jQuery pageMe

Easy Table Pagination Plugin For Materialize - jQuery pageMe
File Size: 7.79 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a simple, customizable jQuery table pagination plugin for Materialize CSS framework that allows for paginating your large HTML table to improve content readability.

How to use it:

1. Import the Google Icon Font:

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Import the Materialize CSS framework:

<link rel="stylesheet" href="materialize.min.css">
<script src="materialize.min.js"></script>

3. Import jQuery library and the plugin's main script:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/pagination.js"></script>

4. Create an empty html list to place the pagination links.

<span class="left" id="total_reg"></span>
<ul class="pagination pager" id="myPager"></ul>

5. Call the function on the target html table.

$('#myTable').pageMe({
  pagerSelector:'#myPager'
});

6. Customize the table paginator with the following options.

$('#myTable').pageMe({
  pagerSelector:'#myPager',
  activeColor: 'blue',
  perPage: 10,
  showPrevNext: false,
  nextText: '',
  prevText: '',
  hidePageNumbers: false
});

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