Bootstrap表和分页分页插件首页最后一页 [英] Bootstrap table and pagination pagination plugin first page last page

问题描述

我有以下用于对表行/项目进行分页的bootstrap插件.

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

引导示例

在当前版本中，我可以转到上一页和下一页(一次一页)如何实现另外两个按钮<第一页和最后一页>，它们将转到分页的第一页或最后一页?

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?

另一件事是，当我滚动到最后一页并单击任何最后一页时，该视图不再显示页面数量，而是显示一个页面.它应始终显示设置中设置的页面数量.如果我有20页，并且想一次查看5页，那么当我在末尾17 18 19 20并单击其中任意一个时，则看不到最后五页，而只能看到我单击的那一页.

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.

推荐答案

我希望对您有所帮助.我创建了函数first()，使您可以转到首页(索引为0)，还可以使函数last()跳转至索引为[numberofPages -1]的页面.我还从您自己的答案中包含了您自己的代码，该代码解决了最后一页未显示您想要的所有元素的问题.您可能还希望在u处于两侧边缘时隐藏第一个和最后一个链接，但这取决于您.

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.

我还添加了新设置showFirstLast:它允许您隐藏该按钮.并更改了活动类如何添加到按钮的方式，原因是更改了结构并更改了前面的新按钮，只是为了确保它正确显示了活动页面. 您可以在此处进行检查 http://bootply.com/93579

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

});

这篇关于Bootstrap表和分页分页插件首页最后一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！