Boostrap Pagination

Admin

9 years ago

Pagination in bootstrap:

Javascript

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);
}

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:

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

<h4>Bootstrap Pagination</h4>

</li>

<li><a href="/">Itemt</a>

</li>

</li>

</li>

</li>

<li><a href="/">Itemt</a>

</li>

</li>

</li>

</li>

</li>

</li>

<li><a href="/">Itembl</a>

</li>

<li><a href="/">Itemd</a>

</li>

<li><a href="/">Itemr</a>

</li>

</li>

</li>

</li>

</ul>

</div>

Source: http://www.bootply.com/60206