简体   繁体   English

Bootstrap 3表分页(最大页数)

[英]Bootstrap 3 table pagination (max pages)

I'm trying to figure out how I can change this plugin so that I can define the number o pages to show at once. 我试图找出如何更改此插件,以便我可以定义要立即显示的页数。

Bootstrap 3 table pagination plugin Bootstrap 3表分页插件

I mean: if my table has 100 items/rows, and I want to show 10 items per page, that means I will have 10 pages totally in the pagination. 我的意思是:如果我的表有100个项目/行,并且我想在每页显示10个项目,这意味着我将在页面中共有10个页面。

<< 1 2 3 4 5 6 7 8 9 10 >>

How can I change that plugin so I can see for example 5 pages at a time (instead of all 10) 如何更改该插件,以便我可以一次看到5个页面(而不是全部10个页面)

<< 1 2 3 4 5 >>

and if you scroll to the 6'th page it will be: 如果你滚动到第6页,它将是:

<< 2 3 4 5 6 >>

and so forth ... 等等......

See this updated Bootply: http://bootply.com/93506 请参阅此更新的Bootply: http ://bootply.com/93506

Add a new numbersPerPage setting. 添加新的numbersPerPage设置。 Then, hide/show the pager page number links (li) accordingly. 然后,相应地隐藏/显示寻呼机页码链接(li)。 Once when the plugin initializes.. 一旦插件初始化..

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

and once again in the goToPage() function when the page changes.. 当页面发生变化时再次进入goToPage()函数..

if (settings.numbersPerPage>1) {
    $('.page_link').hide();
    $('.page_link').slice(page, settings.numbersPerPage+page).show();
}

Here's another example making a Bootstrap reusable "pager" function. 这是制作Bootstrap可重用“寻呼机”功能的另一个例子。 Then you just pass in the table and number of items per page.. 然后你只需传递表格和每页的项目数量。

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

http://www.codeply.com/go/bVuylrC5Oq http://www.codeply.com/go/bVuylrC5Oq

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM