javascript - Bootstrap Pagination not working with displayed content -
want make dynamic bootstrap pagination displaying different content on clicking paginations.
try this, hope work you
<html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="main" style="text-align:center;"> <h2 style="text-align:center;">pagination div structur</h2> <div class='blk content4'> <!--// show here ur div structure--> pagination content here. </div> <div class="pagi"></div> </div> <script type="text/javascript"> $('.pagi').bootpag({ total: 27, page: 1, maxvisible: 5, leaps: true, firstlastuse: true, first: '<span aria-hidden="true">←</span>', last: '<span aria-hidden="true">→</span>', wrapclass: 'pagination', activeclass: 'active', disabledclass: 'disabled', nextclass: 'next', prevclass: 'prev', lastclass: 'last', firstclass: 'first' }).on("page", function (event, num) { $(".content4").html("page " + num); // or ajax content loading... }).find('.pagination'); </script> </div> </body> </html>
Comments
Post a Comment