Bootstrap table and pagination pagination plugin f

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.

回答1:

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

});

回答2:

I resolved the last part when you scroll to the last pages now you can see all 5 pages or as many as mentioned in the settings. Here is how:

In the goTo function:

Basically we just check what is the current page number and if that number is less then the total pages - how many pages to show at once then show the next five from the current page otherwise we are within the total pages - pages to show at once and show them

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