如何使用JavaScript在引導分頁中隱藏中間頁？

Question

我有了以下問題的幫助才能進行引導分頁：如何編程引導3分頁以使用簡單的HTML內容

現在，我有29頁，我想一直隱藏一些頁面，只顯示一次，比方說8。

例如，當您查看第1頁時，您看到：1，2，3，4，5，... 27，28，29

我在這里看了一下，但是由於我不知道如何將其與這些html'units'集成而無法使用： http : //angular-ui.github.io/bootstrap/#/分頁

那么，有沒有一種方法可以改編我擁有的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在引導分頁中隱藏中間頁？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-10-01 21:31:05

如何使用JavaScript在引導分頁中隱藏中間頁？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-10-01 21:31:05

解決方案1
0 已采納 2016-10-01 21:31:05