In this tutorial we are going to learn how to use JQuery Pagination Plugin, which automatically create pagination buttons based on our requirement (create button like first, last, previous, next etc).
This plugin help you to create simple, effective, and useful pagination for your site. All you need to do is specify an element (preferably a ul or div) and the plugin takes care of the rest. This pagination requires Jquery library, the plugin itself, and optionally the Bootstrap CSS (as it helps to create formatted button with help of Bootstrap CSS).
Follow the below steps to include this JQuery Plugin in your web based application.
Step - 1 :
Include the below Bootstrap CSS style file, JQuery Libray File and twbsPagination Plugin in your html file.
Step - 2 :
Include the below html tag in html file.
Step - 3 :
Last step is most important one. Here we need to call twbsPagination function, which is a part of this Jquery Plugin.
Some important attribute of twbsPagination function.
totalPages - The number of pages.
visiblePages - Max visible pages.
first - Text label for the 'First' button.
prev - Label for the 'Previous' button.
next - Label for the 'Next' button.
last - Label for the 'Last' button
activeClass - Class(es) for active button
disabledClass - Class(es) for the disabled button(s)
anchorClass - CSS class(es) for anchors inside buttons
In Case you want learn more about twbsPagination Plugin, Please check out the below Link :
https://github.com/esimakin/twbs-pagination
Lets see the complete source code of wbsPagination Plugin that we have implemented for this tutorial, This may help you during the integration of web based application with MySQL. This ready made plugin save your time and effort.
Output :
Download Code :
https://github.com/skptricks/php-Tutorials/tree/master/jQuery%20Pagination%20plugin
This is all about wbsPagination Jquery pagination Plugin. In case you have any Questions, please do comment in comment box below.
This plugin help you to create simple, effective, and useful pagination for your site. All you need to do is specify an element (preferably a ul or div) and the plugin takes care of the rest. This pagination requires Jquery library, the plugin itself, and optionally the Bootstrap CSS (as it helps to create formatted button with help of Bootstrap CSS).
Follow the below steps to include this JQuery Plugin in your web based application.
Step - 1 :
Include the below Bootstrap CSS style file, JQuery Libray File and twbsPagination Plugin in your html file.
<link rel="stylesheet prefetch" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.twbsPagination.min.js"></script>
Step - 2 :
Include the below html tag in html file.
<ul id="pagination-demo" class="pagination-sm pagination"></ul>
Step - 3 :
Last step is most important one. Here we need to call twbsPagination function, which is a part of this Jquery Plugin.
<script> $('#pagination-demo').twbsPagination({ totalPages: 6, visiblePages: 4, next: 'Next', prev: 'Prev', onPageClick: function(event, page) { //fetch content and render here $('#page-content').text('Page ' + page) + ' content here'; } }); </script>
Some important attribute of twbsPagination function.
totalPages - The number of pages.
visiblePages - Max visible pages.
first - Text label for the 'First' button.
prev - Label for the 'Previous' button.
next - Label for the 'Next' button.
last - Label for the 'Last' button
activeClass - Class(es) for active button
disabledClass - Class(es) for the disabled button(s)
anchorClass - CSS class(es) for anchors inside buttons
In Case you want learn more about twbsPagination Plugin, Please check out the below Link :
https://github.com/esimakin/twbs-pagination
Lets see the complete source code of wbsPagination Plugin that we have implemented for this tutorial, This may help you during the integration of web based application with MySQL. This ready made plugin save your time and effort.
<html lang="en"> <head> <link rel="stylesheet prefetch" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.twbsPagination.min.js"></script> <style type="text/css" class="cp-pen-styles"> .wrapper { margin: 60px auto; text-align: center; } h1 { margin-bottom: 1.25em; } #pagination-demo { display: inline-block; margin-bottom: 1.75em; } #pagination-demo li { display: inline-block; } .page-content { background: #eee; display: inline-block; padding: 10px; width: 100%; max-width: 660px; } </style> </head> <body> <div class="wrapper"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1> Jquery Pagination Plugin demo </h1> <ul id="pagination-demo" class="pagination-sm pagination"></ul> </div> </div> <div id="page-content" class="page-content">Page 16</div> </div> </div> <script> $('#pagination-demo').twbsPagination({ totalPages: 6, visiblePages: 4, next: 'Next', prev: 'Prev', onPageClick: function(event, page) { //fetch content and render here $('#page-content').text('Page ' + page) + ' content here'; } }); </script> </body> </html>
Output :
Download Code :
https://github.com/skptricks/php-Tutorials/tree/master/jQuery%20Pagination%20plugin
This is all about wbsPagination Jquery pagination Plugin. In case you have any Questions, please do comment in comment box below.
No comments:
Post a Comment