2

我有以下引导插件用于对表行/项目进行分页。

引导层示例

使用当前版本，我可以转到上一页和下一页（一次一页）如何实现另外两个按钮<first 和 last>将转到分页中的第一页或最后一页？

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

4

2 回答 2

6

我希望这会对你有所帮助。我创建了函数 first() 让您移动到第一页（在索引 0 处），还创建了函数 last() 将您转发到索引页 [numberofPages -1]。我还从你自己的答案中包含了你自己的代码，它解决了最后一页没有显示你想要的所有元素的问题。当你在两边的边缘时，你可能还希望隐藏第一个和最后一个链接，但这取决于你。

我还包括了新设置 showFirstLast: 它允许您隐藏该按钮。并改变了活动类添加到按钮的方式，因为前面的新按钮改变了结构，只是为了确保它正确显示活动页面。你可以在这里查看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});

});
于 2013-11-12T08:42:00.030 回答
0

当您滚动到最后一页时，我解决了最后一部分，现在您可以看到所有 5 页或设置中提到的所有页面。方法如下：

在 goTo 函数中：

基本上我们只检查当前页码是多少，如果该页码小于总页数 - 一次显示多少页然后显示当前页面的下五个页面，否则我们在总页数内 - 一次显示的页面并向他们展示

 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();
        }
    }
于 2013-11-12T08:30:33.477 回答