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

我引导分页这个问题的帮助工作：How do I program bootstrap-3 pagination to work with simple HTML content 如何使用JavaScript在bootstrap分页中隐藏中间页面？

现在，我有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'; 
}

来源

2016-09-18 touto

这是解决使用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; 

});

来源

2016-10-01 21:31:05 touto

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

回答

相关问题