I am currently attempting to implement server-side pagination in my application, but I am facing challenges as the paging option seems to be missing. I have been following this tutorial for guidance.
Below is a snippet of my code:
JavaScript:
$scope.vm={};
$scope.vm.users = [];
$scope.vm.pageno = 1;
$scope.vm.total_count = 0;
$scope.vm.itemsPerPage = 10;
$scope.getData = function(pageno){
$scope.vm.users = [];
var params = {
pageno: $scope.vm.pageno,
itemsPerPage: $scope.vm.itemsPerPage
};
featureService.getPagingFeatures(params).then(function (response) {
console.log("Getting paging Feature list..");
if (response.status.name == "OK") {
$scope.vm.users = response.pagingFeaturesList;
$scope.vm.total_count = response.total_count;
} else {
}
}, function (error) {
console.log(error);
});
};
$scope.getData($scope.vm.pageno);
HTML:
<table class="table table-striped table-hover">
<thead>
<tr>
<th> SR# </th>
<th> Name </th>
<th> Code </th>
<th> Description </th>
<th> is Active </th>
</tr>
</thead>
<tbody>
<tr ng-show="vm.users.length <= 0"><td colspan="5" style="text-align:center;">Loading new data!!</td></tr>
<tr dir-paginate="user in vm.users|itemsPerPage:vm.itemsPerPage" total-items="vm.total_count">
<td> {{$index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.code}}</td>
<td> {{user.description}}</td>
<td> {{user.isActive}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true"
on-page-change="vm.getData(newPageNumber)" >
</dir-pagination-controls>
Here is how my current table looks like: https://i.sstatic.net/Dj1zj.png
I would greatly appreciate some help on adding paging links below my table. I've tried various solutions from Stack Overflow and Google, but nothing seems to work for me.