B.J. A.A. B.J. A.A. - 19 days ago 11
AngularJS Question

AngularJS pagination only shows one page

I'm using angular-ui-bootstrap-tpls version: 0.14.3 to paginate some result i bring from some database, the problem is that the pagination always looks like this:

<< < 1 > >>


It doesn't matter if set it up with fixed values or with dynamic values, it stays always the same.
Here is my html code:

<uib-pagination total-items="bigTotalItemsMapfre"
ng-model="bigCurrentPageMapfre" max-size="maxSize" class="pagination-sm"
boundary-links="true" ng-change="pageChangedMapfre()" id="pagMapfre"
first-text="&laquo;" previous-text="&lsaquo;" next-text="&rsaquo;"
last-text="&raquo;" style="margin-bottom: 5px; margin-top: 5px;"></uib-pagination>


the javascript:

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


app.controller("ctrl",["$http","$scope","servicio",function($http,$scope,servicio){

$scope.paginationMapfre = {
currentPage: 1,
maxSize: 5,
totalItems :50
};

$scope.init=function(){


//some petitions to the database
servicio.load(url_comentarios+"@mapfre_mx'&page="+$scope.paginationMapfre.currentPage).then(function(info){
$scope.comentariosMapfre=info.data.content; //content to paginate
$scope.paginationMapfre.totalItems = info.data.totalElements; //total elements

});




$scope.pageChangedMapfre = function(){
servicio.load(url_comentarios+"@mapfre_mx'&page="+$scope.bigCurrentPageMapfre).then(function(info){
$scope.comentariosMapfre=info.data.content; //update the content with another petition to the DB
});
}



}

}]);


I not sure what i'm missing/doing wrong, why it doesn't work? i was following the code from the angular site.
Note: the results from the DB are always more than 10, so it should paginationMapfre.totalItems should update when the function is called.

Answer

In the pagination directive you're setting total-items to bigTotalItemsMapfre

<uib-pagination total-items="bigTotalItemsMapfre" ...

Are you setting bigTotalItemsMapfre to the array length anywhere?

Looking at your controller's code it should rather be:

<uib-pagination total-items="paginationMapfre.totalItems" ...
or 
<uib-pagination total-items="paginationMapfre.length" ...