admin管理员组文章数量:1356032
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.
Also my code ,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title> Pagination example </title>
<link rel="stylesheet" href="style.css" />
<script src=".3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="ments in pgment | 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="ments in pgment">
<td>{{ments.postId}}</td>
<td>{{ments.id}}</td>
<td>{{ments.name}}</td>
<td>{{ments.email}}</td>
<td>{{ments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
script.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pgment = [];
details();
function details() {
$http({
method: 'GET',
url: ''
}).success(function(data, status) {
console.log(data);
pgment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pgment[pgment.length - 1].id + 1;
pgment.push(pg.newComment);
pg.newComment = null;
};
}
})();
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.
Also my code ,
<!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/1.3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="ments in pg.ment | 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="ments in pg.ment">
<td>{{ments.postId}}</td>
<td>{{ments.id}}</td>
<td>{{ments.name}}</td>
<td>{{ments.email}}</td>
<td>{{ments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
script.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pg.ment = [];
details();
function details() {
$http({
method: 'GET',
url: 'http://jsonplaceholder.typicode./ments'
}).success(function(data, status) {
console.log(data);
pg.ment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pg.ment[pg.ment.length - 1].id + 1;
pg.ment.push(pg.newComment);
pg.newComment = null;
};
}
})();
- 1 what's in your script.js ? seems that u're missing the whole angular-utils library included – shershen Commented Jun 8, 2015 at 22:30
- 1 I have now included the .js – user2948246 Commented Jun 8, 2015 at 22:34
- 1 what do you mean "did not work"? you only posted pieces of a plunker, and a link to a directive that you are referring to in your HTML but don't appear to have loaded the script or the dependency for.... – Claies Commented Jun 8, 2015 at 22:40
3 Answers
Reset to default 5- Firstly download the dirPagination.js from here.
- Include the dirPagination.js file on your page like :
<script src="~/Content/dirPagination.js"></script>
- After that add dir-paginate directive for pagination in script file.code given below :
angular.module('plunker', ['angularUtils.directives.dirPagination']);
- Then in tr tag add given line of code :
<tr dir-paginate="ments in pg.ment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
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>
If you study the demo on the page of angularUtils, you can see that they use:
1) include file with the library in html:
<script src="dirPagination.js"></script>
2) angular utility library is included as a dependancy in the application, see in script.js
var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);
So you need to add those 2 things in your app file to make pagination to work.
change
<table dir-paginate="ments in pg.ment | itemsPerPage: 10" >
to
<table>
then change
<tr ng-repeat="ments in pg.ment">
to
<tr dir-paginate="ments in pg.ment | itemsPerPage: 10" >
本文标签： javascriptUsing pagination on a table in AngularJSStack Overflow
版权声明：本文标题：javascript - Using pagination on a table in AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744058689a2583722.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论