Bootstrap表和分页分页插件第一页最后一页

我有以下bootstrap插件用于分页表行/项。

Bootply示例

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

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

Answer 1

我希望这会对你有所帮助。 我创建了函数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){ $('
<
').appendTo(pager); } if (settings.showPrevNext){ $('
«
').appendTo(pager); } var curr = 0; while(numPages > curr && (settings.hidePageNumbers==false)){ $('
'+(curr+1)+'
').appendTo(pager); curr++; } if (settings.numbersPerPage>1) { $('.page_link').hide(); $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show(); } if (settings.showPrevNext){ $('
»
').appendTo(pager); } if (settings.showFirstLast){ $('
>
').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}); }); 

Answer 2

滚动到最后几页时，我解决了最后一部分，现在您可以看到所有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(); } }