Use angular-ui pagination

css/style.css

@@ -1,3 +1,7 @@
+.pagination ul > li:not(.disabled) {
+  cursor: pointer;
+}
+
 .pagination ul > li.active > a {
   color: #fff;
   background-color: #428bca;

index.html

@@ -276,6 +276,22 @@
     </fieldset>
   </form>
 
+  <span class="clearfix"></span>
+
+  <div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
+    <pagination
+      total-items="totalDownloads"
+      items-per-page="pageSize"
+      max-size="6"
+      page="currentPage"
+      boundary-links="true"
+      previous-text="&lsaquo;"
+      next-text="&rsaquo;"
+      first-text="&laquo;"
+      last-text="&raquo;"
+      >
+    </pagination>
+  </div>
 
   <table
     ng-repeat="download in getDownloads()"
@@ -531,34 +547,18 @@
 
   <!-- {{{ download pagination -->
   <div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
-    <ul>
-      <li
-        ng-class="{disabled: currentPage == 1}"
-        ng-click="setPage(1)">
-        <a href="#">&laquo;</a>
-      </li>
-      <li
-        ng-class="{disabled: currentPage == 1}"
-        ng-click="advancePage(-1)">
-        <a href="#">‹</a>
-      </li>
-      <li
-        ng-repeat="page in getPages()"
-        ng-class="{active: currentPage == page}"
-        ng-click="setPage(page)">
-        <a href="#">{{page}}</a>
-      </li>
-      <li
-        ng-class="{disabled: currentPage == totalPages}"
-        ng-click="advancePage(1)">
-        <a href="#">›</a>
-      </li>
-      <li
-        ng-class="{disabled: currentPage == totalPages}"
-        ng-click="setPage(totalPages)">
-        <a href="#">&raquo;</a>
-      </li>
-    </ul>
+    <pagination
+      total-items="totalDownloads"
+      items-per-page="pageSize"
+      max-size="6"
+      page="currentPage"
+      boundary-links="true"
+      previous-text="&lsaquo;"
+      next-text="&rsaquo;"
+      first-text="&laquo;"
+      last-text="&raquo;"
+      >
+    </pagination>
   </div>
   <!-- }}} -->
 

js/ctrls/download.js

@@ -1,5 +1,6 @@
 angular
 .module('webui.ctrls.download', [
+  "ui.bootstrap",
   'webui.services.utils', 'webui.services.rpc', 'webui.services.alerts',
   'webui.services.settings', 'webui.services.modals'
 ])
@@ -171,11 +172,6 @@ function(
   // current displayed page
   scope.currentPage = 1;
 
-  scope.pageControlRadius = 3;
-
-  // total maximum pages
-  scope.totalPages = 0;
-
   // total amount of downloads returned by aria2
   scope.totalAria2Downloads = function() {
     return scope.active.length
@@ -219,42 +215,12 @@ function(
 
     scope.totalDownloads = downloads.length;
 
-    scope.totalPages = Math.ceil(scope.totalDownloads / scope.pageSize) || 1;
-
-    // fix the bug when downloads are deleted until no left on a specific page
-    if (scope.currentPage > scope.totalPages)
-      scope.currentPage = scope.totalPages;
-
     downloads = downloads.slice( (scope.currentPage - 1) * scope.pageSize );
     downloads.splice( scope.pageSize );
 
     return downloads;
   }
 
-  scope.setPage = function(pageNumber) {
-    scope.currentPage = pageNumber;
-    scope.currentPage = Math.max(Math.min(scope.currentPage, scope.totalPages), 1);
-    return false;
-  };
-
-  scope.advancePage = function(num) {
-    return scope.setPage(scope.currentPage + num);
-  };
-
-  // get the pages to be displayed
-  scope.getPages = function() {
-    var minPage = scope.currentPage - scope.pageControlRadius;
-
-    if (minPage < 1) minPage = 1;
-
-    var maxPage = scope.currentPage + scope.pageControlRadius;
-
-    if (maxPage > scope.totalPages)
-      maxPage = scope.totalPages;
-
-    return _.range(minPage, maxPage + 1);
-  }
-
   // convert the donwload form aria2 to once used by the view,
   // minor additions of some fields and checks
   scope.getCtx = function(d, ctx) {