How to put serial number for rows in data table ac

Question

I want to put serial number for rows in my data table. I want it to be in accordance to the pagination used.

Html :

<div class="widget-content table-responsive table-container" ng-controller="getEmployeesController" >

                <table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered">
                    <tr ng-repeat="employee in $data">
                        <td data-title="'#'">{{$index + 1}}</td>
                        <td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }">
                            {{employee.firstName}}
                        </td>
<td data-title="'Last Name'" sortable="'lastName'" filter="{ 'lastName': 'text' }">
                            {{employee.lastName}}
                        </td>
</tr>
                </table> 
    </div>

Controller :

myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, employeeServices, dataTable, $window, $timeout, $filter) {
    employeeServices.getEmployees().then(function (result) {
        $scope.data = result.data;
        //employeeServices.getStateId("Available").then(function(result){
        employeeServices.getStateId("Available").then(function (result) {
            $scope.benchId = result.data.id;
        });
        if (!result.data.error) {           
            dataTable.render($scope, '', "employeesList", result.data);
        }
}]);

Services.js :

myApp.factory('employeeServices', ['apiServices', "$location", function (apiServices, $location) {

    var factoryDefinitions = {
        getEmployees: function () {
            return apiServices.getFromTalentPool('/EmployeeState?state=&pageNumber=0&pageSize=0').success(function (data) {
                return data;
            });

}

    return factoryDefinitions;
}

App.js :

myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {

    var factoryDefinition = {
      render: function($scope, config, componentId, data) {

        if(!config) config ={};
        var config = angular.extend({}, {page:1, count:10}, config)

        $scope[componentId] = new ngTableParams(config, {
            total: data.length, // length of data
            getData: function ($defer, params) {
                // organize filter as $filter understand it (graph object)
                var filters = {};
                angular.forEach(params.filter(), function (val, key) {
                    var filter = filters;
                    var parts = key.split('.');
                    for (var i = 0; i < parts.length; i++) {
                        if (i != parts.length - 1) {
                            filter[parts[i]] = {};
                            filter = filter[parts[i]];
                        }
                        else {
                            filter[parts[i]] = val;
                        }
                    }
                });
                // use build-in angular filter
                var filteredData = params.filter() ?
                        $filter('filter')(data, filters) :
                        data;
                var orderedData = params.sorting() ?
                        $filter('orderBy')(filteredData, params.orderBy()) :
                        data;
                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }); 


      }
    }

    return factoryDefinition;
  }
]);

My pagination includes both 'page level' selector and 'rows /page' selector.

How should I link the serial number count to pagination so that the same serial numbers are not shown for page 2,3,4.. so on...

Answer 1

Found the solution at last.

I found that in APP.js :

$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

was returning count of the page number selected in pagination as well as the page size.

So added two scope variables $scope.pageNumber and $scope.itemsPerPageto the directive.

    //Datatable
    myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {

        var factoryDefinition = {
          render: function($scope, config, componentId, data) {
            ............................................
...............................................................
..............................................................
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    $scope.pageNumber = params.page();
                    $scope.itemsPerPage = params.count();
                }
            }); 
                      }
        }
        return factoryDefinition;
      }
    ]);

Now in HTML I made the calculation to find the index number. I replaced <td data-title="'#'">{{$index + 1}}</td> with <td data-title="'#'">{{ (itemsPerPage * (pageNumber-1)) + $index+1 }}</td> and that was the solution to my problem!