[英]Angularjs pagination page number styling
I have tried creating using this http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js script ( For the result I want ) and it works well. 我尝试使用此http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js脚本创建(对于我想要的结果),它运行良好。 But for some reason it crashes with my uib-typeahead, so I have to resort to the one I am currently using. 但是由于某种原因,它会以我的uib-typeahead崩溃,因此我不得不求助于我当前使用的那个。 Is there a workaround? 有解决方法吗? Thanks in advance for the help! 先谢谢您的帮助!
This is the result I want 这是我想要的结果
And this is what I currently have 这就是我目前拥有的
my HTML: 我的HTML:
<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
Javascript: 使用Javascript:
$scope.currentPage = 0;
$scope.pageSize = 4;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
}
for (var i=0; i < $scope.displayPage.length; i++) {
$scope.data.push("Item "+ i);
}
myApp.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
You have to use repeat till what numberOfPages()
return. 您必须重复使用,直到numberOfPages()
返回。 Create a button and use ng-repeat
like following: 创建一个按钮并使用ng-repeat
,如下所示:
<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
<button ng-repeat="page in numberOfPages()">{{page}}</button>
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
I'd suggest not to re-invent the paging. 我建议不要重新发明分页。
In my projects I was using following library: 在我的项目中,我使用以下库:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
It is not in maintained state anymore, but still works. 它不再处于维护状态,但仍然有效。
I think, even default template will do what you want (check their demo). 我认为,即使是默认模板也可以满足您的要求(请查看其演示)。 On top of that, you can specify your own controls template and enjoy a working pagination logic. 最重要的是,您可以指定自己的控件模板并享受有效的分页逻辑。
A great library for pagination (as well as filtering and sorting) which is implemented very quickly and easily is ngTable, here's a link: ngTable是用于分页(以及过滤和排序)的出色库,可以快速,轻松地实现,这里是一个链接:
API and short tutorial API和简短教程
Can also be changed with bootstrap. 也可以使用引导程序进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.