Generalized pagination

4 files changed, 52 insertions, 23 deletions

diff --git a/src/fauxton/app/modules/databases/views.js b/src/fauxton/app/modules/databases/views.js
index afaee071c..26e902e82 100644
--- a/src/fauxton/app/modules/databases/views.js
+++ b/src/fauxton/app/modules/databases/views.js
@@ -13,10 +13,11 @@
 define([
   "app",
 
+  "modules/fauxton/base",
   "api"
 ],
 
-function(app, FauxtonAPI) {
+function(app, Fauxton, FauxtonAPI) {
   var Views = {};
 
   Views.Item = FauxtonAPI.View.extend({
@@ -47,11 +48,7 @@ function(app, FauxtonAPI) {
 
     serialize: function() {
       return {
-        databases: this.collection,
-        page: this.page,
-        perPage: this.perPage,
-        totalDbs: this.collection.length,
-        totalPages: Math.ceil(this.collection.length / this.perPage)
+        databases: this.collection
       };
     },
 
@@ -80,6 +77,15 @@ function(app, FauxtonAPI) {
           model: database
         }));
       }, this);
+
+      this.insertView("#database-pagination", new Fauxton.Pagination({
+        page: this.page,
+        perPage: this.perPage,
+        total: this.collection.length,
+        urlFun: function(page) {
+          return "#/_all_dbs?page=" + page;
+        }
+      }));
     },
 
     afterRender: function() {
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index 0297dac63..2526f8038 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -129,5 +129,27 @@ function(app, Backbone) {
     }
   });
 
+  Fauxton.Pagination = Backbone.View.extend({
+    template: "templates/fauxton/pagination",
+
+    initialize: function(options) {
+      this.page = options.page;
+      this.perPage = options.perPage;
+      this.total = options.total;
+      this.totalPages = Math.ceil(this.total / this.perPage);
+      this.urlFun = options.urlFun;
+    },
+
+    serialize: function() {
+      return {
+        page: this.page,
+        perPage: this.perPage,
+        total: this.total,
+        totalPages: this.totalPages,
+        urlFun: this.urlFun
+      };
+    }
+  });
+
   return Fauxton;
 });
diff --git a/src/fauxton/app/templates/databases/list.html b/src/fauxton/app/templates/databases/list.html
index a2e70f1bb..808c9502c 100644
--- a/src/fauxton/app/templates/databases/list.html
+++ b/src/fauxton/app/templates/databases/list.html
@@ -27,20 +27,4 @@ the License.
   <tbody>
   </tbody>
 </table>
-<div class="pagination pagination-centered">
-  <ul>
-    <% if (page > 1) { %>
-      <li><a href="#/_all_dbs?page=<%= page - 1 %>">&laquo;</a></li>
-    <% } else { %>
-      <li class="disabled"><a href="#/_all_dbs?page=<%= page %>">&laquo;</a></li>
-    <% } %>
-    <% _.each(_.range(1, totalPages+1), function(i) { %>
-      <li <% if (page == i) { %>class="active"<% } %>><a href="#/_all_dbs?page=<%= i %>"><%= i %></a></li>
-    <% }) %>
-    <% if (page < totalPages) { %>
-      <li><a href="#/_all_dbs?page=<%= page + 1 %>">&raquo;</a></li>
-    <% } else { %>
-      <li class="disabled"><a href="#/_all_dbs?page=<%= page %>">&raquo;</a></li>
-    <% } %>
-  </ul>
-</div>
+<div id="database-pagination"></div>
diff --git a/src/fauxton/app/templates/fauxton/pagination.html b/src/fauxton/app/templates/fauxton/pagination.html
new file mode 100644
index 000000000..161593b23
--- /dev/null
+++ b/src/fauxton/app/templates/fauxton/pagination.html
@@ -0,0 +1,17 @@
+<div class="pagination pagination-centered">
+  <ul>
+    <% if (page > 1) { %>
+      <li><a href="<%= urlFun(page-1) %>">&laquo;</a></li>
+    <% } else { %>
+      <li class="disabled"><a href="<%= urlFun(page) %>">&laquo;</a></li>
+    <% } %>
+    <% _.each(_.range(1, totalPages+1), function(i) { %>
+      <li <% if (page == i) { %>class="active"<% } %>><a href="<%= urlFun(i) %>"><%= i %></a></li>
+    <% }) %>
+    <% if (page < totalPages) { %>
+      <li><a href="<%= urlFun(page+1) %>">&raquo;</a></li>
+    <% } else { %>
+      <li class="disabled"><a href="<%= urlFun(page) %>">&raquo;</a></li>
+    <% } %>
+  </ul>
+</div>