AngularJS UI Bootstrap pagination control off by one page

Question

I am trying to get the Angular UI Boostrap pagination control to work with a table populated by a web api controller.

I have a directive that is used on the pagination control:

app.filter('pagination', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    };
});

I have the following in my angular controller:

$scope.currentPage = 0;
// max items per page
$scope.pageSize = 10;
// number of pagination buttons to display
$scope.numberButtons = 5;
// total items in the array
$scope.totalItems = 0;
// number of pages
$scope.numberPages = 0

In the view, I have the following (truncated for brevity):

...
    <tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
        | pagination: currentPage * pageSize | limitTo: pageSize 
        | orderBy:sortType:sortReverse">
        <td><a href="#/asset-type-details/{{assetType.AssetTypeId}}">{{ assetType.AssetTypeId }}</a></td>-->
        <td>{{ assetType.AssetTypeName }}</td>
        <td>{{ assetType.Active | yesNo }}</td>
    </tr>
</table>
<uib-pagination ng-show="totalItems" total-items="totalItems" max-size="numberButtons" ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

The issue I am having is when the view initally comes up, everything is fine. The first 10 items (sort by Id) start with Ids 1-10 (for example) as expected. However, when I navigate away from the first page and then navigate back to the first page, I get items 11-20 instead of 1-10.

The angular filter at top works fine when I use a custom pager control but the angular ui one seems to be off one page when you navigate away from the first page.

Also, the number of items ($scope.totalItems) and pages ($scope.numberPages) are being set in my controller method, which isn't represented here.

Any help is appreciated

Edit: one other thing I noticed is when I navigate to the last page, it returns no data, so the whole scope of the pagination seems off by one.

Edit 2: Ok, it appears I got it working. I had to set the current page to 1 instead of 0:

$scope.currentPage = 1;

then change my pagination control to subtract 1 (currentPage-1):

<tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
    | pagination: (currentPage-1) * pageSize | limitTo: pageSize 
    | orderBy:sortType:sortReverse">

If this proves out I will post it as the answer when I am allowed to.

steveareeno · Accepted Answer · 2016-02-05 18:13:10Z

3

As stated n my original post, I had to set the current page to 1 instead of 0:

$scope.currentPage = 1;

then change my pagination control to subtract 1 (currentPage-1):

<tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
    | pagination: (currentPage-1) * pageSize | limitTo: pageSize 
    | orderBy:sortType:sortReverse">

answered Feb 5, 2016 at 18:13

steveareeno

1,9876 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS UI Bootstrap pagination control off by one page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related