sacamoto sacamoto -4 years ago 162
AngularJS Question

Pagination shows all my items only in first page

Example of my issue on Plunker

Pagination shows all my items in the first page, while other pages are empty,I'm using bootstrap 3, my idea is to show 6 items per page, and for every row 3 items, I would be grateful if someone can help me.

Controller:

var controllerPagination = angular.module('controllerPagination', ['ui.bootstrap']);


// Pagination events
controllerPagination.controller('PageEvents', ['$scope', function ($scope) {


// pagination controls
$scope.filteredTodos = []
$scope.currentPage = 1;
$scope.entryLimit = 6; // itemEvents per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.itemEvents = [
{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}

];

$scope.totalItems = $scope.itemEvents.length;
$scope.chunkedItems = [] ;

while ($scope.itemEvents.length > 0)
$scope.chunkedItems.push($scope.itemEvents.splice(0, 3));



$scope.$watch('currentPage + entryLimit', function() {
var begin = (($scope.currentPage - 1) * $scope.entryLimit)
, end = begin + $scope.entryLimit;

$scope.filteredTodos = $scope.chunkedItems.slice(begin, end);
});

}]);``





<body ng-app="controllerPagination">

<section id="" >
<div class="container" ng-controller="PageEvents">
<div class="row" ng-repeat="itemEvents in filteredTodos ">

<div class="col-lg-4 col-md-4 col-sm-4 " ng-repeat="event in itemEvents">
<div class="portfolio-item">

<h5 >{{event.title}}</h5>
<div class="" >
<div class="preview btn btn-success ">{{event.date}}</div>
<p>
{{event.content}}
</p>
<a class="preview" href="{{event.lien}}" >
<i class="fa fa-microphone fa-5x"></i>
read more
</a>
</div>
</div>
</div>

</div>
<pagination ng-model="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit" boundary-links="true"></pagination>
</div>

</section>
</body>

Answer Source

entryLimit is actually per 3 items, so to show 6 items per page you need to set that to 2, not 6.

Here's an updated plunker: http://plnkr.co/edit/FfYHdjlcgCivESdfZUUF?p=preview

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download