Search code examples
angularjsngtable

Incorrect number of rows per page in ngTable


In this plunk I have an ngTable generated with dynamic columns. The number of rows per page is 5, but as you can see the number of rows is 8 without pagination. Is this a defect or I'm doing something wrong?

HTML

<div ng-controller="myCtl" ng-app="app">

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

</div>

Javascript:

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

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

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


      $scope.data = [ 
        { uid: 'User 1',ugr: 'Group 1'},
        { uid: 'User 2', ugr: 'Group 2'},
        { uid: 'User 3', ugr: 'Group 3'},
        { uid: 'User 4', ugr: 'Group 4'},
        { uid: 'User 5', ugr: 'Group 5'},
        { uid: 'User 6', ugr: 'Group 6'},
        { uid: 'User 7', ugr: 'Group 7'},
        { uid: 'User 8', ugr: 'Group 8'}

      ];

      $scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});

});

Solution

  • Two issues:

    $scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});

    should be $scope.tableParams = new NgTableParams({count:5},{data: $scope.data,counts: [5, 10]});

    Note how I used data instead of dataset (I think dataset is for tables without dynamic columns).

    In your html, you should get the data from $data, and your columns from $columns. Those dollar sign variables refer to the variables provided to you by ng-table.

    Your data was getting loaded directly from $scope.data, instead of using the data passed to NgTableParams.

    <table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
            <tr ng-repeat="row in $data">
              <td ng-repeat="col in $columns">{{row[col.nm]}}</td>
            </tr>
    </table>
    

    Also, you do not need to set td title, since you are already passing your cols to it. http://plnkr.co/edit/U8eMbtzAlxIf6ftRtxZA?p=preview