Question

我想在数据表中输入行的序列号。我希望它符合使用的分页。

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>

控制器：

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;
  }
]);

我的分页包括“页面级别”选择器和“行/页面”选择器。

如何将序列号计数链接到分页，以便第2,3,4页没有显示相同的序列号...等等......

Answer 1

最后找到解决方案。

我在APP.js中找到了：

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

返回分页中选择的页码数和页面大小。

因此，在指令中添加了两个范围变量$scope.pageNumber和$scope.itemsPerPage。

    //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;
      }
    ]);

现在在HTML中我进行了计算以找到索引号。我将<td data-title="'#'">{{$index + 1}}</td>替换为<td data-title="'#'">{{ (itemsPerPage * (pageNumber-1)) + $index+1 }}</td>，这就解决了我的问题！

如何根据分页将行的序列号放在数据表中

1 个答案: