I need to get Serial number in my table. I am using ng-table in angularjs to get the pagination controls. In my first column of the table I am using {{$index+1}} to display the serial number. But when I navigate to next page again the serial number starts from 1 instead of 11. Here is my code:
HTML
<body ng-app="main">
<div ng-controller="DemoCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td>{{$index+1}}</td>
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
JS
var app = angular.module('main', ['ngTable']).controller('DemoCtrl', function($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Steve", age: 27},
{name: "Adam", age: 29},
{name: "Mark", age: 34},
{name: "Ricky", age: 43},
{name: "Peter", age: 27},
{name: "Matthew", age: 29},
{name: "Smith", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
Please check this plunker for the issue:
You can use tableParams object.
<tr ng-repeat="user in $data">
<td>{{ (tableParams.page() - 1) * tableParams.count() + $index + 1 }}</td>
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
See updated plunker here.