我正在尝试对一个包含 500 个条目的表格进行分页，每页 10 个条目。 为了实现这一点，我遇到了一个 GitHub page .
但是没有用。我想知道我在这里缺少什么。
还有我的代码，
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title> Pagination example </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
<thead>
<tr>
<th>POST_ID</th>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>BODY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="comments in pg.comment">
<td>{{comments.postId}}</td>
<td>{{comments.id}}</td>
<td>{{comments.name}}</td>
<td>{{comments.email}}</td>
<td>{{comments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
脚本.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pg.comment = [];
details();
function details() {
$http({
method: 'GET',
url: 'http://jsonplaceholder.typicode.com/comments'
}).success(function(data, status) {
console.log(data);
pg.comment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
pg.comment.push(pg.newComment);
pg.newComment = null;
};
}
})();
最佳答案
- 首先下载dirPagination.js从这里开始。
- 在您的页面上包含 dirPagination.js 文件，例如:
<script src="~/Content/dirPagination.js"></script>
- 之后在脚本中添加用于分页的 dir-paginate 指令 file.code 如下:
angular.module('plunker', ['angularUtils.directives.dirPagination']);
- 然后在 tr 标签中添加给定的代码行:
<tr dir-paginate="comments in pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
然后在您的 HTML 页面中添加分页控件，用于放置 First、Next、Previous 和 Last 按钮。代码如下:
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" > </dir-pagination-controls>
关于javascript - 在 AngularJS 的表格上使用分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30720136/