Dynamic Paging System In jQuery And Bootstrap - Simple Pagination

This is a simple, dynamic, Bootstrap based paging system that provides a convenient pagination control for tabular data and/or long lists.

Features:

• Paginate any content without page refresh.
• With query strings (with page refresh).
• Also allows you to paginate items through form submission by post method. Useful for data filter.
• Supports both Bootstrap 4 and Bootstrap 3 frameworks. The Bootstrap 3 Version is available here.

How to use it:

1. Load the required Bootstrap stylesheet in the head of the HTML document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css" />

2. Create an empty Bootstrap pagination component below the tabular data or long list you'd like to paginate.

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
... More Items Here ...

<ul class="pagination example">
</ul>

3. Load the pagination.js script after jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/pagination.js"></script>

4. Attach the function rpmPagination to the pagination component and specify the selector of list items.

$('.example').rpmPagination({
  domElement: '.item'
});

5. The required CSS styles to hide the overflowing items.

.hide { display:none!important }

6. Specify the maximum number of items per page. Default: 10.

$('.example').rpmPagination({
  domElement: '.item',
  limit: 5
});

7. Specify the init page number. Default: 1.

$('.example').rpmPagination({
  domElement: '.item',
  currentPage: 2
});

8. Append limit/offset parameters to the URL. Demo

$('.example').rpmPagination({
  domElement: '.item',
  total: 0
  link: 'example.process.php',
  refresh: true
});

9. Enable a search field to filter through items. Demo

<form action="example.process.php" method="POST" id="myForm">
  <input type="text" name="song" placeholder="search songs ..." value=""></div>
  <input type="text" name="artist" placeholder="search artists ..." value="abc"></div>
  <input type="submit" value="Search"></div>
</div>

$('.example').rpmPagination({
  domElement: '.item',
  total: 0
  link: 'example.process.php',
  refresh: true,
  formElement: '#myForm'
});

Changelog:

2020-05-29

• Bugfix

---

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