I have been working on a project that involves retrieving data from an API and displaying it in a table. I am using AngularJS and the md-data-table library by Daniel Nagy. Following the setup instructions, I was able to display my data successfully. However, I am facing issues with pagination. When I try to move to the next page or change the number of rows displayed, nothing happens.
Here is the HTML code:
<div id="users">
<md-table-container>
<table md-table multiple md-progress="promise">
<thead md-head md-order="query.order" md-on-reorder="getData" class="columns">
<tr md-row>
<th md-column md-order-by="" flex="10"><span>Email</span></th>
<th md-column md-numeric md-order-by="" flex="20"><span>Insurance</span></th>
<th md-column md-numeric flex="20">Policies</th>
<th md-column md-numeric flex="20">Status</th>
<th md-column md-numeric flex="10">Extra</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="user in users | orderBy:'-policyId'">
<td md-cell flex="10">{{user.email}}</td>
<td md-cell flex="20">{{user.insuranceName}}</td>
<td md-cell flex="20"><button class="action-button" ng-click="downloadPolicy(user.policyUrl)" download="user.policyUrl"
ng-href="user.policyUrl">Download</button></td>
<td md-cell flex="20">{{user.status}}</td>
<td md-cell class="more" flex="10"><md-menu>
<div ng-click="openMenu($mdMenu, $event)">
Ver Más
</div>
<md-menu-content>
<md-menu-item ng-hide="!user.isPending">
<md-button ng-click="details(user.policyId)">
<span class="opt-btn">Add Details</span>
</md-button>
</md-menu-item>
<md-menu-item ng-hide="user.isPending">
<md-button ng-click="edit(user.policyId)">
<span class="opt-btn">Edit</span>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu></td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page"
md-total="{{users.length}}" md-on-paginate="getData" md-page-select></md-table-pagination>
This is the controller code:
$scope.users = [];
$scope.totalUsers = 0;
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
var getData = function(){
console.log("Get data");
$http({
method: 'GET',
url: config.apiUrl+'/policy/all'
}).then(function successCallback(response) {
var currentData = response.data
for(var i=0; i < currentData.length; i++) {
var current = currentData[i];
if(current.isPending === true) {
current.status = "Pending";
} else if(current.availableUpgrades === false) {
current.status = "Upgrades Available";
} else if(current.availableUpgrades === true) {
current.status = "No Upgrades";
}
}
$scope.users = currentData;
$scope.totalUsers = currentData.length;
}, function errorCallback(response) {
console.log(response);
});
}
If you have any suggestions on how to resolve the pagination issue, your help would be greatly appreciated.