Dynamic Paging System In jQuery And Bootstrap - Simple Pagination
File Size: | 21.2 KB |
---|---|
Views Total: | 22062 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.