Pagination in bootstrap:
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | var listElement = $('#newStuff'); var perPage = 4; var numItems = listElement.children().size(); var numPages = Math.ceil(numItems/perPage); $('.pager').data("curr",0); var curr = 0; while(numPages > curr){ $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo('.pager'); curr++; } $('.pager .page_link:first').addClass('active'); listElement.children().css('display', 'none'); listElement.children().slice(0, perPage).css('display', 'block'); $('.pager li a').click(function(){ var clickedPage = $(this).html().valueOf() - 1; goTo(clickedPage,perPage); }); function previous(){ var goToPage = parseInt($('.pager').data("curr")) - 1; if($('.active').prev('.page_link').length==true){ goTo(goToPage); } } function next(){ goToPage = parseInt($('.pager').data("curr")) + 1; if($('.active_page').next('.page_link').length==true){ goTo(goToPage); } } function goTo(page){ var startAt = page * perPage, endOn = startAt + perPage; listElement.children().css('display','none').slice(startAt, endOn).css('display','block'); $('.pager').attr("curr",page); } |
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <div class="container"> <div class="col-md-4"> <h4>Bootstrap Pagination</h4> <ul id="newStuff" class="nav nav-tabs nav-stacked"> <li><a href="/">Item2</a> </li> <li><a href="/">Itemt</a> </li> <li><a href="/">Item3</a> </li> <li><a href="/">Item4--</a> </li> <li><a href="/">Item5</a> </li> <li><a href="/">Itemt</a> </li> <li><a href="/">Item5</a> </li> <li><a href="/">Item33</a> </li> <li><a href="/">Item4</a> </li> <li><a href="/">Item8</a> </li> <li><a href="/">Item3</a> </li> <li><a href="/">Itembl</a> </li> <li><a href="/">Itemd</a> </li> <li><a href="/">Itemr</a> </li> <li><a href="/">Item43</a> </li> <li><a href="/">Item44</a> </li> <li><a href="/">Item45</a> </li> </ul> <div class="pagination pagination-large"> <ul class="pager"></ul> </div> </div> </div> |
Source: http://www.bootply.com/60206