2016-10-24 8 views
0

データテーブルに行のシリアル番号を入力したいとします。私はそれが使用されているページ設定に従うことを望みます。ページテーブルに従って行のシリアル番号をデータテーブルに入れる方法

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())); 

は、改ページで選択したページ数のカウントだけでなく、ページサイズを返していました。

ディレクティブに2つのスコープ変数$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>に置き換えました。それが私の問題の解決策でした!

+0

あなた自身で見つけました! –

関連する問題