ul

<link rel = "stylesheet prefetch" href = "css/bootstrap.min.css" > <script src = "js/jquery.min.js" ></script> <script src = "js/jquery.twbsPagination.min.js" ></script>

<ul id = "pagination-demo" class = "pagination-sm pagination" ></ul>

<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>

Max visible pages.

<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>

In this tutorial we are going to learn how to use, which automatically create pagination buttons based on our requirement (create button likeetc).This plugin help you to create simple, effective, and useful pagination for your site. All you need to do is specify an element (preferably aor) and the plugin takes care of the rest. This pagination requires, t, and(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.Include the belowandin your html file.Include the below html tag in html file.Last step is most important one. Here we need to call, which is a part of this Jquery Plugin.Some important attribute ofThe number of pages.- Text label for the 'First' button.- Label for the 'Previous' button.- Label for the 'Next' button.- Label for the 'Last' button- Class(es) for active button- Class(es) for the disabled button(s)- CSS class(es) for anchors inside buttonsIn Case you want learn more aboutPlease check out the below Link :Lets see the completethat 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.This is all aboutIn case you have any Questions, please do comment in comment box below.