Question

我正在尝试在我的页面中使用分页，但它可以正常使用一组，但好像我试图使用多个它不起作用。这是代码code for pagination的链接，它与一组工作正常。

＆＃13;

var listElement = $('#newStuff');
var perPage = 4;
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);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-4">
    <h4>Bootstrap Pagination</h4>
    <ul id="newStuff" class="nav nav-tabs nav-stacked">
      <li><a href="/">Item2</a>
      </li>
      <li><a href="/">Itemt</a>
      </li>
      <li><a href="/">Item3</a>
      </li>
      <li><a href="/">Item4--</a>
      </li>
      <li><a href="/">Item5</a>
      </li>
      <li><a href="/">Itemt</a>
      </li>
      <li><a href="/">Item5</a>
      </li>
      <li><a href="/">Item33</a>
      </li>
      <li><a href="/">Item4</a>
      </li>
      <li><a href="/">Item8</a>
      </li>
      <li><a href="/">Item3</a>
      </li>
      <li><a href="/">Itembl</a>
      </li>
      <li><a href="/">Itemd</a>
      </li>
      <li><a href="/">Itemr</a>
      </li>
      <li><a href="/">Item43</a>
      </li>
      <li><a href="/">Item44</a>
      </li>
      <li><a href="/">Item45</a>
      </li>
    </ul>
    <div class="pagination pagination-large">
      <ul class="pager"></ul>
    </div>
  </div>
</div>

＆＃13;

bootstrap分页不适用于多个

0 个答案: