Pagination doesn't work correctly

[Kristijan Pokas]

Hej,

I've a problem with the pagination.
I'm using the Pagination of UI.bootstrap and I have integrated the <pagination>-Tag in my template.
In my controller I've defined a
currentPage=1,
maxSize=5 and
totalItems=10.

<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" first-text="&lsaquo;&lsaquo;" previous-text="&lsaquo;" next-text="&rsaquo;" last-text="&rsaquo;&rsaquo;" num-pages="numPages">
</pagination>Code hier eingeben...

The list shows always all items but I want to display only 5 per page.
And the number of pagination numbers stay always on 1.

Can anyone help me with my problem? :(

[Nicholas Smith]

You need to set items-per-page to 5 instead of max-size.

See reference at: http://angular-ui.github.io/bootstrap/#/pagination

[Kristijan Pokas]

Ok.. it works.. but how can I define the pagination with my items?
He shows me always the same items from page 1.. but on page 2 he should to display the next 5 items.

I have a ngRepeat in my table <tr> model in list | limitTo: itemsPerPage

[Nicholas Smith]

Show me the code / html that displays the items being paged.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/zkJe4qlIjXA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Kristijan Pokas]

Here's the HTML code:

...
<tr ng-repeat="model in list | limitTo: itemsPerPage">
            <td><input type="checkbox"></td>
            <td>{{model.id | limitTo : 8 }}</td>
            <td ng-repeat="column in form | filter : {list: true}">
              <span ng-if="column.labelProperty">{{model[column.propertyName][column.labelProperty] | invoke : column.filter : column.filterParam}}</span>
              <span ng-if="!column.labelProperty">{{model[column.propertyName] | invoke : column.filter : column.filterParam}}</span>
            </td>
</tr>
...
<pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm" boundary-links="true" first-text="&lsaquo;&lsaquo;" previous-text="&lsaquo;" next-text="&rsaquo;" last-text="&rsaquo;&rsaquo;" num-pages="numPages" items-per-page="itemsPerPage">
  </pagination>

[Kristijan Pokas]

$scope.totalItems = $scope.list;

When I output my totalItems in the brackets {{totalItems.length}} then it outputs 12 (thats the currently number of items).

I think the paginator see this as a string and not as a number, because when I'm giving my totalItems a static number then it outputs the correct Pagination Numbers (in my example there are 3 pages).

How can I convert this in an Int value? I tried with parseInt but it doesn't work.

[Nicholas Smith]

You need to specify an offset as a starting point in your ng-repeat directive.

<tr ng-repeat="model in list | offset: currentPage*itemsPerPage | limitTo: itemsPerPage">

[Kristijan Pokas]

I've tried your solution but then it outputs no items. :(

[Nicholas Smith]

Does your $scope.list actually contain all the items not just one page of results?  

[Kristijan Pokas]

The problem is, that the $scope.list.length isn't an int value.

I have to convert this but I don't know how..

The items are coming from a backend server. There are object items.

[Nicholas Smith]

Sorry about that I forgot offset wasn't part of stock angular filters.  You'll need to add it.  Here's a plnkr showing your code working with the filter.

http://plnkr.co/edit/QLH5beg2QMEVg9h5Fx2R?p=preview

The filter to add will look like this:

angular.module('YourAppModule').filter('offset', function () {

  return function (input, offset) {

    return (input instanceof Array) ? input.slice(+offset) : input; 

  }

})

[Kristijan Pokas]

It doesn't work.

I have a dynamic array from the backend server. So I can't set a static number in totalItems?! I need the number of the list from the backend.. when I set $scope.totalItems.length then I have the dynamic number of items.. it is currently 12.. but in future the number of items can increment itself.

but the totalItems.length is NOT a INT.. I think it's a string. That is the problem why the list won't output correctly. Do you know what I mean?

The array consists of objects which have more items..

for example: {id: ..., firstname: ..., lastname: ... etc.} {....} and so on.

[Kristijan Pokas]

Nicholas.. have you an idea how could I convert a string in an INT?

That is the only one problem in my code. Because when I set the totalItems as a static number.. it works. But how I said earlier.. the number of items will increase itself then I can't use the number 12 no longer.

[Nicholas Smith]

I updated my example to directly set $scope.totalItems = list.length and it is still working fine.  There might be another problem in your code can you resend the javascript and HTML as it looks now?  

To answer your question though, if you need to convert a string to a number you can use the parseInt function, such as 

var a = parseInt("10")

From your function where you are receiving the data from the server you could assign $scope.totalItems = results.length from there.  

[Nicholas Smith]

Forgot to link the updated example, it is at

http://plnkr.co/edit/vgNJOb2ZfgEmjqHBp1G3?p=preview

[Kristijan Pokas]

I've seen your solution.. it is a simple example. :)

My list is following defined:

$scope.list = $scope[$scope.resourceType + 's'] = Resource.query();
....
$scope.totalItems = 12; //$scope.list;
    $scope.currentPage = 1;
    $scope.itemsPerPage = 5;

...

.filter('offset', function() {
    return function(input, offset) {

      return (input instanceof Array) ? input.slice(+offset) : input;
    };
  })

the html code is as such as yours.

But I can't $scope.list.length assign to the variable $scope.totalItems.. only $scope.list

[Nicholas Smith]

Is $scope.list actually an array? 

--

[Kristijan Pokas]

Yes it has 12 objects currently.. hier is the definition of Resource:

var Resource;

    Resource = $resource(apiHost + '/:resource/:id', {
      id: '@id',
      resource: $scope.resourceType + 's'
    }, {
      update: {method: 'PUT'}
    });Code hier eingeben...

[Nicholas Smith]

Have you tried this yet? On your html

<pagination total-items="items.length"

I think when you are setting it in your javascript with $scope.totalItems=list.length the resource promise hasn't resolved yet and it's just getting set to 0.

Not at my computer so I can't test this. Let me know.

[Kristijan Pokas]

Yeeeeeeeeeeeeeeeeeeeeeeeeeeeah.. that was the solution.. I've changed the attribute in the pagination-tag to totalItems.length..

THANK YOUUUU NICHOLAS!!!! :)))

[Kristijan Pokas]

Hej Nicholas.. I have an another problem..

The Pagination have a bug. The problem is in the backend I have 20 items. But when I create a new object on my application and save it locally and going to another site and back again then it loads 4 sites and not 5 because my default value is 5 items per page.

How can I fixed that?

[Nicholas Smith]

You mean its not showing the new one you just added ?

[Kristijan Pokas]

Right. You need to imagine when I create a new object for example a new person and click save, the list continues the page number.
But when you click go to a other menu for example events and go back to person then the list has 20 items again instead of 21.

[Nicholas Smith]

In your browser dev tools console watch the network tab. When you save a new one then go back to the list do you see it request the list from the server again?  And does the call result in a status of OK or does is say its using a cached value?  Also look at the content of the network call see if the new value is coming back from the server. Need to figure out if its being cached on the client or server side.

[Kristijan Pokas]

Yes it give me the list from the server again.the status ist GET 200 OK.. And in the cache block is nothing. It gives me no cache value back.

[Nicholas Smith]

Is your application using ngroute?

[Kristijan Pokas]

Yes it is working with ngRoute.

[Nicholas Smith]

I'm not sure, do you have your project code on github or someplace I can take a look?  

[Kristijan Pokas]

I can send you a link to my hotmail Drive because the code is not published for everyone.

Could you give me your email address?

[Nicholas Smith]

When you click Save button, and watching the network tab, do you see the 'POST' or 'PUT' request going to your API?

[Kristijan Pokas]

It sends the "POST" method.

[Nicholas Smith]

You said you save the new one and it shows up in your list, then you go to some other site and then back to your site and it no longer shows the new item.  Does the new record exist in your database?  I'm trying to pinpoint where the problem actually is.

[Kristijan Pokas]

Currently the items are saved in a config.yaml File not in a database because the project runs locally.
When I create a new item and click save and go to some other site and back again, the item isn't saved in the list.
I need to access on the resource from the backend. When you go in the file "PoiResource.java" you see the getAll Function for example to get all pois. How can I access the java value to angular.
I've only read something in the docu with $resource..

[Nicholas Smith]

You said previously you were able to see the GET request going to your API and sending back the results, that should be happening from a call to $http or $resource from your angular controller. 

[Kristijan Pokas]

Yes my angular controller has a $resource.

Resource = $resource(apiHost + '/:resource/:id', {...}