Dinesh Sundaraneedi Dinesh Sundaraneedi - 11 days ago 5
AngularJS Question

How to use UI Bootstrap Pagination for a table, generated using ng-repeat

I am trying to keep pagination in my Angular application using

uib-pagination
. I am unable to get proper way to do this.

HTML

<table id="mytable" class="table table-striped">
<thead>
<tr class="table-head">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in aCandidates">
<th>
<div>{{person}}</div>
</th>
</tr>
</tbody>
</table>


Controller

$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;


I am able to see the pagination bar but no action is performed with that and the entire table data is rendered even after giving total-items as 10.

How exactly uib-pagination works and how is the data (in this case
aCandidates
) is linked to pagination.

Answer

The part you are missing is that you have to have a function to get the current page's data from your entire array. I've added a function called setPagingData to handle this.

app.controller('MainCtrl', function($scope) {
  var allCandidates = ['name1',
    'name2',
    'name3',
    'name4',
    'name5',
    'name6',
    'name7',
    'name8',
    'name9',
    'name10',
    'name11',
    'name12',
    'name13',
    'name14',
    'name15',
    'name16',
    'name17',
    'name18',
    'name19',
    'name20'
    ];

    $scope.totalItems = allCandidates.length;
    $scope.currentPage = 1;
    $scope.itemsPerPage = 5;

    // watch for changes to current page
    $scope.$watch('currentPage', function() {
       setPagingData($scope.currentPage);
    });

    function setPagingData(page) {
       var pagedData = allCandidates.slice((page - 1) * $scope.itemsPerPage, page * $scope.itemsPerPage);
       $scope.aCandidates = pagedData;
       }
    });

You can see this in the forked plunker

Comments