twitter-bootstrap 使用 Bootstrap 在网页上对一定数量的 <p> 元素进行分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17390179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Bootstrap to paginate a set number of <p> elements on a webpage
提问by Syed Priom
The application I work with serves 'article pages' consisting of many paragraphs using <p>element, now I want to paginate these paragraphs, suppose 15 paragraphs in three pages, with 5 paragraphs in each page.
我使用的应用程序使用<p>元素提供由许多段落组成的“文章页面” ，现在我想对这些段落进行分页，假设三页中有 15 个段落，每页有 5 个段落。
What the Bootstrap tutorialexplains is based on list elements, I am sure there must have been a way to implement this for other elements?
Bootstrap教程解释的是基于列表元素的内容，我确定一定有一种方法可以为其他元素实现这一点？
I came across another good plugin called Pajinate, but it requires list elements explicitly!
我遇到了另一个名为Pajinate 的好插件，但它明确地需要列表元素！
Does Bootstrap or any plug in out there offers a solution where we can apply pagination based on any specific HTML element or CSS class? My problem is to find one that I can apply to <p>element.
Bootstrap 或任何插件是否提供了一种解决方案，我们可以根据任何特定的 HTML 元素或 CSS 类应用分页？我的问题是找到一个我可以应用于<p>元素的。
回答by Zim
Rather than using a jquery plugin or server-side paging you can make a fairly simple paging implementation for Bootstrap using jQuery and the Bootstrap pagination class..
您可以使用 jQuery 和 Bootstrap 分页类为 Bootstrap 制作一个相当简单的分页实现，而不是使用 jquery 插件或服务器端分页。
var listElement = $('#pageStuff');
var perPage = 2;
var numItems = listElement.children().size();
var numPages = Math.ceil(numItems/perPage);
$('.pager').data("curr",0);
var curr = 0;
while(numPages > curr){
$('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo('.pager');
curr++;
}
$('.pager .page_link:first').addClass('active');
listElement.children().css('display', 'none');
listElement.children().slice(0, perPage).css('display', 'block');
$('.pager li a').click(function(){
var clickedPage = $(this).html().valueOf() - 1;
goTo(clickedPage,perPage);
});
function previous(){
var goToPage = parseInt($('.pager').data("curr")) - 1;
if($('.active').prev('.page_link').length==true){
goTo(goToPage);
}
}
function next(){
goToPage = parseInt($('.pager').data("curr")) + 1;
if($('.active_page').next('.page_link').length==true){
goTo(goToPage);
}
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
listElement.children().css('display','none').slice(startAt, endOn).css('display','block');
$('.pager').attr("curr",page);
}
Place all of the paragraphs in one container, and id the container as 'listStuff'.
将所有段落放在一个容器中，并将容器标识为“listStuff”。
Just change the var perPage = 2to whatever you want (ie: 5).
只需将 更改var perPage = 2为您想要的任何内容（即：5）。
Working demo: http://bootply.com/66815
工作演示：http: //bootply.com/66815
回答by user1991541
In case you are using jQuery v3, use .lengthinstead of .size()on the third line.
如果您使用的是 jQuery v3，请在第三行使用.length而不是.size()。
var numItems = listElement.children().length;
