user2818430 user2818430 - 25 days ago 16
jQuery Question

Bootstrap table and pagination pagination plugin first page last page

I have the following bootstrap plugin for paginating the table rows/items.

Bootply example

With the current version I can go to previous and next page (one page at once) how can I implement two more buttons

<
first and last
>
that will go to first or last page in the pagination?

Another thing is when I scroll to the last pages and I click any of the last pages, then the view doesn't show anymore the amount of pages but instead one single page. It should show at all time the amount of pages set in the settings. If I have 20 pages and I want to see 5 pages at a time, when I go to the end 17 18 19 20 and click any of them then I cannot see the last five but instead just the one I clicked.

scx scx
Answer

I hope that will help you. I've created function first() that makes you move to first page ( at index 0 ) and also function last() that forwards you to page of index [numberofPages -1]. I've also included ur own code from ur own answer which resolves problem with last pages not showing all elements you want. You may also want that first and last link hide when u are on edge of both sides but thats up to you.

Also i've included new setting showFirstLast: which allows u to hide that buttons. And changed a bit how the active class is added to buttons becouse structure changed with the new button in front, just to make sure it shows active page correctly. You can check it here http://bootply.com/93579

$.fn.pageMe = function(opts){
var $this = this,
    defaults = {
        perPage: 7,
        showPrevNext: false,
        numbersPerPage: 5,
        hidePageNumbers: false,
        showFirstLast: true
    },
    settings = $.extend(defaults, opts);

var listElement = $this;
var perPage = settings.perPage; 
var children = listElement.children();
var pager = $('.pagination');

if (typeof settings.childSelector!="undefined") {
    children = listElement.find(settings.childSelector);
}

if (typeof settings.pagerSelector!="undefined") {
    pager = $(settings.pagerSelector);
}

var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);

pager.data("curr",0);

if (settings.showFirstLast){
    $('<li><a href="#" class="first_link">&lt;</a></li>').appendTo(pager);
}     
if (settings.showPrevNext){
    $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}

var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
    $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
    curr++;
}

if (settings.numbersPerPage>1) {
   $('.page_link').hide();
   $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show();
}

if (settings.showPrevNext){
    $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}
if (settings.showFirstLast){
    $('<li><a href="#" class="last_link">&gt;</a></li>').appendTo(pager);
}  

pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
    pager.find('.next_link').hide();
}
pager.children().eq(2).addClass("active");

children.hide();
children.slice(0, perPage).show();

pager.find('li .page_link').click(function(){
    var clickedPage = $(this).html().valueOf()-1;
    goTo(clickedPage,perPage);
    return false;
});
pager.find('li .first_link').click(function(){
    first();
    return false;
});  

pager.find('li .prev_link').click(function(){
    previous();
    return false;
});
pager.find('li .next_link').click(function(){
    next();
    return false;
});
pager.find('li .last_link').click(function(){
    last();
    return false;
});    
function previous(){
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
}

function next(){
    goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
}

function first(){
    var goToPage = 0;
    goTo(goToPage);
} 

function last(){
    var goToPage = numPages-1;
    goTo(goToPage);
} 

function goTo(page){
    var startAt = page * perPage,
        endOn = startAt + perPage;

    children.css('display','none').slice(startAt, endOn).show();

    if (page>=1) {
        pager.find('.prev_link').show();
    }
    else {
        pager.find('.prev_link').hide();
    }

if (page < (numPages - settings.numbersPerPage)) {
        pager.find('.next_link').show();
    }
    else {
        pager.find('.next_link').hide();
    }

    pager.data("curr",page);

if (settings.numbersPerPage > 1) {
    $('.page_link').hide();

    if (page < (numPages - settings.numbersPerPage)) {
        $('.page_link').slice(page, settings.numbersPerPage + page).show();
    }
    else {
        $('.page_link').slice(numPages-settings.numbersPerPage).show();
    }
}

    pager.children().removeClass("active");
    pager.children().eq(page+2).addClass("active");

}
};

$(document).ready(function(){

  $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

});
Comments