使用 Bootstrap 对网页上的一组 <p> 元素进行分页

Question

我使用的应用程序使用 <p> 元素提供由许多段落组成的“文章页面”，现在我想对这些段落进行分页，假设三页有 15 个段落，每页有 5 个段落。

Bootstrap tutorial 解释的内容是基于列表元素的，我确信一定有一种方法可以为其他元素实现这一点？

我遇到了另一个名为 Pajinate 的好插件，但它明确需要列表元素！

Bootstrap 或任何插件是否提供了一种解决方案，我们可以根据任何特定的 HTML 元素或 CSS 类应用分页？我的问题是找到一个我可以应用到<p> 元素。

Answer 1

如果您使用的是 jQuery v3，请在第三行使用 .length 而不是 .size()。

var numItems = listElement.children().length;

Answer 2

您可以使用 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）。

工作演示：http://bootply.com/66815