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

Posted 2023-05-07

【中文标题】如何根据分页在数据表中放置行的序列号

【英文标题】：How to put serial number for rows in data table according to pagination

【发布时间】：2017-03-05 19:37:15

【问题描述】：

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

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 页不会显示相同的序列号......等等......

【参考方案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="'#'"> (itemsPerPage * (pageNumber-1)) + $index+1 </td> 替换了<td data-title="'#'">$index + 1</td>，这就是我的问题的解决方案！