touto touto - 2 months ago 16
HTML Question

How to hide middle pages in bootstrap pagination with JavaScript?

I got bootstrap pagination to work with the help of this question: How do I program bootstrap-3 pagination to work with simple HTML content

Now, I have 29 pages and I would like to always hide some of the pages and only ever show, let's say 8.

E.g. when you view page 1, you see:
1, 2, 3, 4, 5, ... 27, 28, 29

I had a look at this here but couldn't get it to work as I don't know how to integrate it with these html 'units' I have: http://angular-ui.github.io/bootstrap/#/pagination

So is there a way of adapting the HTML and JavaScript code I have, to make the navigation work and look the way I want? Or do I really have to turn to the this angular pagination?

Here's my HTML - I simply repeat the unit for each page (i.e. 29 times)

<!-- 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 -->


Here's the script at the bottom that makes the navigation work:

$( 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

This was solved using ui.bootstrap.pagination, see here for a working example: https://plnkr.co/edit/MSpqMTg3F4ZD0xCP02V9?p=preview

Hope this helps someone!

<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>

For 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;

});