如何使用 JavaScript 在引导分页中隐藏中间页面？答案

【问题标题】：How to hide middle pages in bootstrap pagination with JavaScript?如何使用 JavaScript 在引导分页中隐藏中间页面？
【发布时间】：2017-01-26 09:24:22
【问题描述】：

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

现在，我有 29 页，我想总是隐藏一些页面，只显示，比如说 8 个。

例如当您查看第 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';
}

【问题讨论】：

标签： javascript html twitter-bootstrap pagination

【解决方案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;

});

【讨论】：