如何使用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分頁中隱藏中間頁面？

回答

相關問題