Simple Versatile jQuery Pagination Plugin - simple-pagination.js

Pagination is one of the most commonly used and essential features on any webpage. It provides a way for users to navigate through a large dataset.

This page will introduce a fresh new jQuery pagination plugin, which can be seamlessly added to lists, tables, divs, and many other types of HTML elements.

More Features:

• Pagination styles are fully customizable using CSS to suit your design style.
• Custom number of items to display per page.
• Custom number of visible pages.
• You can control the visibility of each pagination control.
• Multiple languages.
• And much more.

See Also:

• 10 Best Pagination Components In JavaScript

How to use it:

1. Load the needed jquery-simple-pagination-plugin.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-simple-pagination-plugin.js"></script>

2. Initialize the plugin on the container containing a large number of elements that need to be paged.

<div id="container">
  <table>
    <tbody>
      <tr><td>One</td></tr>
      <tr><td>Two</td></tr>
      <tr><td>Three</td></tr>
      ...
    </tbody>
  </table>
</div>

$('#container').simplePagination();

3. By default, this plugin will automatically apply to large HTML tables. You can paginate any element (like list items) you specify by modifying the pagination_container parameter.

$('#container').simplePagination({
  pagination_container: 'li',
});

4. Specify how many items to display per page. Default: 25.

$('#container').simplePagination({
  items_per_page: 25,
});

5. Apply your own styles to the pagination links & controls.

.simple-pagination-page-x-of-x {
  ...
}

simple-pagination-showing-x-of-x {
  ...
}

simple-pagination-items-per-page {
  ...
}

simple-pagination-select-specific-page {
  ...
}

simple-pagination-page-numbers a  {
  ...
}

6. All default plugin options. Options can be overwritten when initializing plugin, by passing an object literal to the simplePagination() method.

$('#container').simplePagination({

  pagination_container: 'tbody',
  html_prefix: 'simple-pagination',

  // button, span, div, et cetera
  navigation_element: 'a',
  items_per_page: 25,
  number_of_visible_page_numbers: 5,

  // enable/disable controls here
  use_page_numbers: true,
  use_first: true,
  use_previous: true,
  use_next: true,
  use_last: true,
  use_page_x_of_x: true,
  use_page_count: false,
  use_showing_x_of_x: true,
  use_item_count: false,
  use_items_per_page: true,
  use_specific_page_list: true,

  // localize the pagination control
  first_content: 'First',
  previous_content: 'Previous',
  next_content: 'Next',
  last_content: 'Last', 
  page_x_of_x_content: 'Page',
  showing_x_of_x_content: 'Showing',

  items_per_page_content: {
    'Five': 5,
    'Ten': 10,
    'Twenty-five': 25,
    'Fifty': 50,
    'One hundred': 100
  },

  thousands_separator: ','
  
});

---

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