Created
June 7, 2013 13:11
-
-
Save philjones88/5729135 to your computer and use it in GitHub Desktop.
ugly angularjs pager generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.directive("pager", function ($compile) { | |
| function generate(currentPage, totalPages, click) { | |
| // How many adjacent pages should be shown on each side? | |
| var adjacents = 2; | |
| //previous page is page - 1 | |
| var prev = currentPage - 1; | |
| //next page is page + 1 | |
| var next = currentPage + 1; | |
| //lastPage is = total pages / items per page, rounded up. | |
| var lastpage = totalPages; | |
| //last page minus 1 | |
| var lpm1 = lastpage - 1; | |
| var pagination = ""; | |
| if (lastpage > 1) { | |
| pagination += "<ul>"; | |
| var counter; | |
| //previous button | |
| if (currentPage > 1) { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + prev + ")'>«</a></li>"; | |
| } | |
| //pages | |
| if (lastpage < 7 + (adjacents * 2)) //not enough pages to bother breaking it up | |
| { | |
| for (counter = 1; counter <= lastpage; counter++) { | |
| if (counter == currentPage) { | |
| pagination += "<li class='active'><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| else { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| } | |
| } | |
| else if (lastpage > 5 + (adjacents * 2)) //enough pages to hide some | |
| { | |
| //close to beginning; only hide later pages | |
| if (currentPage < 1 + (adjacents * 2)) { | |
| for (counter = 1; counter < 4 + (adjacents * 2) ; counter++) { | |
| if (counter == currentPage) { | |
| pagination += "<li class='active'><a href='javascript:void(0)'>" + counter + "</a></li>"; | |
| } | |
| else { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| } | |
| pagination += "<li class=\"disabled disabled-dots\"><a href='javascript:void(0)'>...</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + lpm1 + ")'>" + lpm1 + "</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + lastpage + ")'>" + lastpage + "</a></li>"; | |
| } | |
| //in middle; hide some front and some back | |
| else if (lastpage - (adjacents * 2) > currentPage && currentPage > (adjacents * 2)) { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(1)'>1</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(2)'>2</a></li>"; | |
| pagination += "<li class='disabled disabled-dots'><a href='javascript:void(0)'>...</a></li>"; | |
| for (counter = currentPage - adjacents; counter <= currentPage + adjacents; counter++) { | |
| if (counter == currentPage) { | |
| pagination += "<li class='active'><a href='javascript:void(0)'>" + counter + "</a></li>"; | |
| } | |
| else { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| } | |
| pagination += "<li class='disabled disabled-dots'><a href='javascript:void(0)'>...</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + lpm1 + "'>" + lpm1 + "</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + lastpage + ")'>" + lastpage + "</a></li>"; | |
| } | |
| //close to end; only hide early pages | |
| else { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(1)'>1</a></li>"; | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(2)'>2</a></li>"; | |
| pagination += "<li class='disabled disabled-dots'><a href='javascript:void(0)'>...</a></li>"; | |
| for (counter = lastpage - (2 + (adjacents * 2)) ; counter <= lastpage; counter++) { | |
| if (counter == currentPage) { | |
| pagination += "<li class='active'><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| else { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + counter + ")'>" + counter + "</a></li>"; | |
| } | |
| } | |
| } | |
| //next button | |
| if (currentPage < counter - 1) { | |
| pagination += "<li><a href='javascript:void(0)' ng-click='" + click + "(" + next + ")'>»</a></li>"; | |
| } | |
| } | |
| pagination += "</ul>"; | |
| } | |
| return pagination; | |
| } | |
| return { | |
| restrict: "E", | |
| scope: { | |
| currentPage: "=currentPage", | |
| totalPages: "=totalPages", | |
| click: "=click" | |
| }, | |
| link: function (scope, element, attrs) { | |
| scope.$watch('currentPage + totalPages', function () { | |
| var click = attrs.click; | |
| var currentPage = scope.currentPage || 1; | |
| var totalPages = scope.totalPages || 1; | |
| var html = generate(currentPage, totalPages, click); | |
| // Wrap in bootstrap class | |
| var pagination = '<div class="pagination">' + html + '</div>'; | |
| element.empty(); | |
| element.append(pagination); | |
| $compile(element.contents())(scope); | |
| }); | |
| } | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment