Question

我在这个问题的帮助下得到了引导分页：How do I program bootstrap-3 pagination to work with simple HTML content

现在，我有29页，我想总是隐藏一些页面而且只能显示，让我们说8。

E.g。当您查看第1页时，您会看到： 1,2,3,4,5 ...... 27,28,29

我在这里看了一下，但无法让它工作，因为我不知道如何将它与我拥有的这些html'单位'整合：http://angular-ui.github.io/bootstrap/#/pagination

那么有没有一种方法可以调整我的HTML和JavaScript代码，使导航工作并按照我想要的方式进行操作？或者我真的要转向这个角度分页？

这是我的HTML - 我只是为每个页面重复单位（即29次）

<!-- pagination navigation -->
<div class="container">
  <div class="col-lg-12 smooth">
    <nav class="text-center">
      <ul class="pagination">
        <li class="pag_prev">
          <a href="#gohere" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="pag_next">
          <a href="#gohere" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- pagination navigation ends -->

<!-- one unit start -->
<div class="container2">
  <div class="content">

    <div class="col-lg-7" id="gohere">
      <br>
      <a href="image.jpg"  class="thumbnail" data-lightbox="image3">
        <img src="image.jpg" 
             alt="text" class="image2"></a>
    </div>

    <div class="jumbotron">
      <div class="col-lg-5">
        text
      </div>
    </div>

  </div>
</div>

<!-- one unit end -->

这是底部的脚本，使导航工作：

$( document ).ready(function() {
  pageSize = 1;
  pagesCount = $(".content").length;
  var currentPage = 1;

  /////////// PREPARE NAV ///////////////
  var nav = '';
  var totalPages = Math.ceil(pagesCount / pageSize);
  for (var s=0; s<totalPages; s++){
    nav += '<li class="numeros"><a href="#gohere">'+(s+1)+'</a></li>';
  }
  $(".pag_prev").after(nav);
  $(".numeros").first().addClass("active");
  //////////////////////////////////////

  showPage = function() {
    $(".content").hide().each(function(n) {
      if (n >= pageSize * (currentPage - 1) && n < pageSize * currentPage)
        $(this).show();
    });
  }
  showPage();


  $(".pagination li.numeros").click(function() {
    $(".pagination li").removeClass("active");
    $(this).addClass("active");
    currentPage = parseInt($(this).text());
    showPage();
  });

  $(".pagination li.pag_prev").click(function() {
    if($(this).next().is('.active')) return;
    $('.numeros.active').removeClass('active').prev().addClass('active');
    currentPage = currentPage > 1 ? (currentPage-1) : 1;
    showPage();
  });

  $(".pagination li.pag_next").click(function() {
    if($(this).prev().is('.active')) return;
    $('.numeros.active').removeClass('active').next().addClass('active');
    currentPage = currentPage < totalPages ? (currentPage+1) : totalPages;
    showPage();
  });
});

if (!document.location.hash){
  document.location.hash = 'gohere';
}

Answer 1

这是使用ui.bootstrap.pagination解决的，请参阅此处以获取一个工作示例：https://plnkr.co/edit/MSpqMTg3F4ZD0xCP02V9?p=preview

希望这有助于某人！

<html ng-app="ui.bootstrap.pag">
<head><!-- linking to js and CSS --></head>
<body ng-controller="PaginationCtrl">

<div>
<ul uib-pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>

<!-- one unit start-->
<div class="content" ng-show="bigCurrentPage ===1">test 1</div>
<!-- one unit end -->
<!-- one unit start-->
<div class="content" ng-show="bigCurrentPage ===2">test 2</div>
<!-- one unit end -->
<!-- one unit -->
<div class="content" ng-show="bigCurrentPage ===3">test 3</div>
<!-- one unit end -->
<!-- one unit -->
<div class="content" ng-show="bigCurrentPage ===4">test 4</div>
<!-- one unit end -->
<!-- one unit -->
<div class="content" ng-show="bigCurrentPage ===5">test 5</div>
<!-- one unit end -->
</div>

</body>
</html>

对于JS

angular.module('ui.bootstrap.pag', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.pag').controller('PaginationCtrl', function      ($scope, $log) {
$scope.totalItems = $(".content").length;
$scope.currentPage = 1;
$scope.itemsPerPage = 1;
$scope.numPages = $(".content").length;

$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};

$scope.pageChanged = function() {
$log.log('Page changed to: ' + $scope.currentPage);
};

$scope.maxSize = 5;
$scope.bigTotalItems = 1;
$scope.bigCurrentPage = 1;

});

如何使用JavaScript隐藏bootstrap分页中的中间页？

1 个答案: