Pimp pagination
* Better active color * Prev/Next items
This commit is contained in:
parent
0f4ddbd155
commit
55dea0f0dd
|
@ -1,3 +1,8 @@
|
||||||
|
.pagination ul > li.active > a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #428bca;
|
||||||
|
}
|
||||||
|
|
||||||
.label-active, .badge-active, .progress-active .bar {
|
.label-active, .badge-active, .progress-active .bar {
|
||||||
background-color: #62C462;
|
background-color: #62C462;
|
||||||
}
|
}
|
||||||
|
|
10
index.html
10
index.html
|
@ -529,12 +529,22 @@
|
||||||
ng-click="setPage(1)">
|
ng-click="setPage(1)">
|
||||||
<a href="#">«</a>
|
<a href="#">«</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li
|
||||||
|
ng-class="{disabled: currentPage == 1}"
|
||||||
|
ng-click="advancePage(-1)">
|
||||||
|
<a href="#">‹</a>
|
||||||
|
</li>
|
||||||
<li
|
<li
|
||||||
ng-repeat="page in getPages()"
|
ng-repeat="page in getPages()"
|
||||||
ng-class="{active: currentPage == page}"
|
ng-class="{active: currentPage == page}"
|
||||||
ng-click="setPage(page)">
|
ng-click="setPage(page)">
|
||||||
<a href="#">{{page}}</a>
|
<a href="#">{{page}}</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li
|
||||||
|
ng-class="{disabled: currentPage == totalPages}"
|
||||||
|
ng-click="advancePage(1)">
|
||||||
|
<a href="#">›</a>
|
||||||
|
</li>
|
||||||
<li
|
<li
|
||||||
ng-class="{disabled: currentPage == totalPages}"
|
ng-class="{disabled: currentPage == totalPages}"
|
||||||
ng-click="setPage(totalPages)">
|
ng-click="setPage(totalPages)">
|
||||||
|
|
|
@ -162,8 +162,13 @@ function(
|
||||||
|
|
||||||
scope.setPage = function(pageNumber) {
|
scope.setPage = function(pageNumber) {
|
||||||
scope.currentPage = pageNumber;
|
scope.currentPage = pageNumber;
|
||||||
|
scope.currentPage = Math.max(Math.min(scope.currentPage, scope.totalPages), 1);
|
||||||
return false;
|
return false;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
scope.advancePage = function(num) {
|
||||||
|
return scope.setPage(scope.currentPage + num);
|
||||||
|
};
|
||||||
|
|
||||||
// get the pages to be displayed
|
// get the pages to be displayed
|
||||||
scope.getPages = function() {
|
scope.getPages = function() {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user