Working database pagination

4 files changed, 34 insertions, 4 deletions

diff --git a/src/fauxton/app/modules/databases/resources.js b/src/fauxton/app/modules/databases/resources.js
index 59dd179ea..6927fd57e 100644
--- a/src/fauxton/app/modules/databases/resources.js
+++ b/src/fauxton/app/modules/databases/resources.js
@@ -135,7 +135,7 @@ function(app, FauxtonAPI, Documents) {
 
     parse: function(resp) {
       // TODO: pagination!
-      return _.map(_.first(resp, 10), function(database) {
+      return _.map(resp, function(database) {
         return {
           id: encodeURIComponent(database),
           name: database
diff --git a/src/fauxton/app/modules/databases/routes.js b/src/fauxton/app/modules/databases/routes.js
index 12edd0ea2..2ba59d789 100644
--- a/src/fauxton/app/modules/databases/routes.js
+++ b/src/fauxton/app/modules/databases/routes.js
@@ -63,7 +63,7 @@ function(app, FauxtonAPI, Databases) {
   Databases.Routes = {
     "": allDbsCallback,
     "index.html": allDbsCallback,
-    "_all_dbs": allDbsCallback
+    "_all_dbs(:params)": allDbsCallback
   };
 
   return Databases;
diff --git a/src/fauxton/app/modules/databases/views.js b/src/fauxton/app/modules/databases/views.js
index 322cd5ad9..afaee071c 100644
--- a/src/fauxton/app/modules/databases/views.js
+++ b/src/fauxton/app/modules/databases/views.js
@@ -32,6 +32,7 @@ function(app, FauxtonAPI) {
 
   Views.List = FauxtonAPI.View.extend({
     dbLimit: 10,
+    perPage: 10,
     template: "templates/databases/list",
     events: {
       "click button.all": "selectAll",
@@ -39,12 +40,18 @@ function(app, FauxtonAPI) {
     },
 
     initialize: function(options) {
+      var params = app.getParams();
       this.collection.on("add", this.render, this);
+      this.page = params.page ? parseInt(params.page, 10) : 1;
     },
 
     serialize: function() {
       return {
-        databases: this.collection
+        databases: this.collection,
+        page: this.page,
+        perPage: this.perPage,
+        totalDbs: this.collection.length,
+        totalPages: Math.ceil(this.collection.length / this.perPage)
       };
     },
 
@@ -61,8 +68,14 @@ function(app, FauxtonAPI) {
       }
     },
 
+    paginated: function() {
+      var start = (this.page - 1) * this.perPage;
+      var end = this.page * this.perPage - 1;
+      return this.collection.slice(start, end);
+    },
+
     beforeRender: function() {
-      this.collection.each(function(database) {
+      _.each(this.paginated(), function(database) {
         this.insertView("table.databases tbody", new Views.Item({
           model: database
         }));
diff --git a/src/fauxton/app/templates/databases/list.html b/src/fauxton/app/templates/databases/list.html
index ba871b59e..a2e70f1bb 100644
--- a/src/fauxton/app/templates/databases/list.html
+++ b/src/fauxton/app/templates/databases/list.html
@@ -27,3 +27,20 @@ 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>