在AngularJS中的表上使用分页 [英] Using pagination on a table in AngularJS
问题描述
我正在尝试对一个表进行分页，该表有500个条目，每页10个条目. 为了实现这一点，我遇到了一个GitHub 页面.
I am trying to paginate a table which has 500 entries, with 10 entries per page. To implement this I came across a GitHub page.
但是它没有用.我想知道我在这里想念的是什么.
But it did not work. I would like to know what I am missing here.
也是我的代码，
<!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>
script.js
script.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 . li>
- 在页面上包含dirPagination.js文件，例如:
- Firstly download the dirPagination.js from here.
- Include the dirPagination.js file on your page like :
<script src="~/Content/dirPagination.js"></script>
- 之后，在脚本中添加用于分页的dir-paginate指令 file.code如下:
- After that add dir-paginate directive for pagination in script file.code given below :
angular.module('plunker'，['angularUtils.directives.dirPagination']);
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.Button的代码，如下所示:
Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
这篇关于在AngularJS中的表上使用分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
