0

In this plunk I have an ngTable with pagination of 3 rows per page set with {count: 3} in NgTableParams. Instead, the table is displaying 4 rows per page. How to fix this?

HTML:

  <table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
    <thead>
      <tr>
        <th ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{col.title}}</th>
      </tr>
    </thead>
    <tr ng-repeat="row in data">
      <td ng-repeat="col in cols" ng-style="{ 'color': col.color }" >{{row[col.nm]}}</td>
    </tr>
  </table>

Javascript:

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

      $scope.cols = [ 
        {nm:'uid', title:'User ID', color: 'blue'}, 
        {nm:'ugr', title: 'Group ID', color: 'red'} 
      ];


      $scope.data = [ 
        { uid: 'aaa',ugr: '222'},
        { uid: 'bbb', ugr: '111'},
        { uid: 'ccc',ugr: '222'},
        { uid: 'ddd', ugr: '111'}
      ];

      $scope.tableParams = new NgTableParams({count: 3}, 
                                   {dataset: $scope.data, counts: []});

});
ps0604
  • 1,227
  • 23
  • 133
  • 330
  • Count is computed from `$scope.data`, if you want only three rows to display then remove 4th row from data, or you want pagination, then set page.rowCount to 3 – harishr Sep 27 '17 at 04:20

1 Answers1

1

you should change your code like this:

<tr ng-repeat="row in $data">
          <td ng-repeat="col in cols" ng-style="{ 'color': col.color }" >{{row[col.nm]}}</td>
        </tr>


$scope.tableParams = new NgTableParams({count: 3}, {data: $scope.data, counts: []});

The reason is: 1、about '$data', please see What is '$data' in ngtable's HTML page 2、about 'data' replace 'dataset', please see Angular ng-table not loading dataset?

ling yu
  • 66
  • 4
  • I tried your solution and it didn't work, can you change my plunk and post it? By the way, the demos in ngTable website use `dataset`, not `data`. – ps0604 Sep 29 '17 at 00:23