Fast Content Paginator With jQuery And Bootstrap 4 - Senzill Pagination
File Size: | 9.83 KB |
---|---|
Views Total: | 2297 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Senzill Pagination is a small jQuery plugin which utilizes Bootstrap 4 pagination component to paginate a large list of web contents for better readability.
How to use it:
1. Load the jQuery Senzill Pagination plugin's script in your Bootstrap 4 page.
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <!-- senzill-pagination.js --> <script src="senzill-pagination.js"></script>
2. Insert your items to a container element.
<div id="example"> <img src="https://picsum.photos/200/300?image=0"/> <img src="https://picsum.photos/200/300?image=1"/> <img src="https://picsum.photos/200/300?image=239"/> <img src="https://picsum.photos/200/300?image=341"/> <img src="https://picsum.photos/200/300?image=301"/> <img src="https://picsum.photos/200/300?image=521"/> <img src="https://picsum.photos/200/300?image=600"/> <img src="https://picsum.photos/200/300?image=67"/> <img src="https://picsum.photos/200/300?image=88"/> <img src="https://picsum.photos/200/300?image=96"/> <img src="https://picsum.photos/200/300?image=510"/> <img src="https://picsum.photos/200/300?image=110"/> <img src="https://picsum.photos/200/300?image=12"/> <img src="https://picsum.photos/200/300?image=321"/> <img src="https://picsum.photos/200/300?image=104"/> </div>
3. Hide the container element on page load.
#example { visibility:hidden; }
4. Attach the pagination plugin to the container element and its child elements.
$(document).ready(function(){ $('#example').senzill(); });
5. Customize the items to display per page. Default: 4.
$(document).ready(function(){ $('#example').senzill({ elPerPage: 5 }); });
Changelog:
2019-02-16
- Fix the destroy() function & Format file
2018-12-28
- JS update
This awesome jQuery plugin is developed by yak0d3. For more Advanced Usages, please check the demo page or visit the official website.