CODEWITHSUNDEEP
javascriptjqueryangularjspagination
laz
laz

Reputation: 291

How to get incremental serial number in Angular table pagination

I am using Angular table pagination. I have a serial number that starts from 1 for each page, but I want continuous page numbers. How to get it?

<div ng-app="myApp" ng-controller="myController">
    <table id="myData">
        <thead>
            <td>S.no</td>
            <td>Name</td>
            <td>Age</td>
        </thead>
        <tbody>
            <tr dir-paginate="data in details | itemsPerPage:3">
                <td>{{$index+1}}</td>
                <td>{{data.name}}</td>
                <td>{{data.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

Full code: https://jsfiddle.net/mLvLzzg7/4/

If I try:

<td>{{itemsPerPage * (currentPage - 1) + $index + 1}}</td>

It is returning null. Any suggestions?

Upvotes: 3

Views: 2056

Answers (1)

Oleksandr Pyrohov
Oleksandr Pyrohov

Reputation: 16266

Formula for calculating the index is correct, but you didn't initialize your variables properly:

app.controller('myController', function($scope) {
    $scope.itemsPerPage = 3;
    $scope.currentPage  = 1;
    $scope.details = [{
        ...
    }];
}

<tr dir-paginate="data in details | itemsPerPage:itemsPerPage" current-page="currentPage">
    <!-- now you can use itemsPerPage and currentPage to calculate index value -->
    <td>{{($index + 1) + (currentPage - 1) * itemsPerPage}}</td>
</tr>

Also, your fiddle didn't include dirPagination directive:

angular.module('myApp', ['angularUtils.directives.dirPagination']);

And I updated jQuery version to newer one in the jsfiddle - now the app works fine.

Upvotes: 2

Related Questions