我使用的应用程序使用<p>
元素提供由许多段落组成的“文章页面”,现在我想对这些段落进行分页,假设三页中有 15 个段落,每页有 5 个段落。
Bootstrap教程解释的内容是基于列表元素的,我相信一定有一种方法可以为其他元素实现这一点?
我遇到了另一个名为Pajinate的好插件,但它明确需要列表元素!
Bootstrap 或任何插件是否提供了一种解决方案,我们可以根据任何特定的 HTML 元素或 CSS 类应用分页?我的问题是找到一个我可以应用于<p>
元素的。
您可以使用 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);
}
将所有段落放在一个容器中,并将容器标识为“listStuff”。
只需将 更改var perPage = 2
为您想要的任何内容(即:5)。
如果您使用的是 jQuery v3,请在第三行使用.length
而不是。.size()
var numItems = listElement.children().length;