javascript - AngularJS md-data-table 上的分页损坏
问题描述
我目前正在开发一个从 API 获取信息的应用程序,然后在表格中显示这些数据。我正在使用旧的 AngularJS 和md-data-table库。我按照说明进行操作,然后可以进行设置并查看我的数据。问题出在分页上。当我单击下一步时,它永远不会移动到另一个页面,也不会更改要显示的行数。
这是 HTML
<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>
这是控制器
$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);
});
}
什么不工作?请任何帮助让我摆脱困境的帮助表示赞赏。
解决方案
我认为这应该有效
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
$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);
});
<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>
推荐阅读
- slick - 如何在 Slick 中对两个不同的实体进行联合查询?
- javascript - 将 Ruby 代码移植到 JavaScript 时出现“超出调用堆栈大小”
- python - Python在运行脚本后立即关闭
- excel - 如何设置分页预览?
- r - 在具有 NA 的特定列中进行 mutate 和 ifelse
- java - 不能转换为 java.base/java.util.Optional
- reactjs - React JS:需要拆分正在检索的状态对象
- c# - 如何将 .NET Core 程序的入口点放在它引用的 NuGet 包中
- java - Tomcat 是在收到 post 正文之前还是之后调用 servlet 的 doPost 方法?
- django - 考虑到其他模型字段,如何使用“MinValueValidator”?