Provide pagination for the database index page in Futon.

git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@690297 13f79535-47bb-0310-9956-ffa450edef68

2 files changed, 52 insertions, 5 deletions

diff --git a/share/www/browse/index.html b/share/www/browse/index.html
index c2d1ae63..93f5a21a 100644
--- a/share/www/browse/index.html
+++ b/share/www/browse/index.html
@@ -28,7 +28,15 @@ specific language governing permissions and limitations under the License.
     <script>
       var page = new CouchIndexPage();
       $(document).ready(function() {
+        var dbsPerPage = $.cookies.get("perpage");
+        if (dbsPerPage) $("#perpage").val(dbsPerPage);
+        $("#perpage").change(function() {
+          page.updateDatabaseListing();
+          $.cookies.set("perpage", this.value);
+        });
+
         page.updateDatabaseListing();
+
         $("#toolbar button.add").click(function() {
           page.addDatabase();
         });
@@ -57,7 +65,19 @@ specific language governing permissions and limitations under the License.
         </tbody>
         <tbody class="footer">
           <tr>
-            <td colspan="4"></td>
+            <td colspan="4">
+              <div id="paging">
+                <a class="prev">← Previous Page</a> |
+                <label>Rows per page: <select id="perpage">
+                  <option selected>10</option>
+                  <option>25</option>
+                  <option>50</option>
+                  <option>100</option>
+                </select></label> |
+                <a class="next">Next Page →</a>
+              </div>
+              <span></span>
+            </td>
           </tr>
         </tbody>
       </table>
diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index 8291d914..298b8cbf 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -36,15 +36,22 @@ function CouchIndexPage() {
     return false;
   }
 
-  this.updateDatabaseListing = function() {
+  this.updateDatabaseListing = function(offset) {
+    offset |= 0;
     $(document.body).addClass("loading");
+    var maxPerPage = parseInt($("#perpage").val(), 10);
+
     $.couch.allDbs({
       success: function(dbs) {
+        $("#paging a").unbind();
+        $("#databases tbody.content").empty();
+
         if (dbs.length == 0) {
           $(document.body).removeClass("loading");
         }
+        var dbsOnPage = dbs.slice(offset, offset + maxPerPage);
 
-        $.each(dbs, function(idx, dbName) {
+        $.each(dbsOnPage, function(idx, dbName) {
           $("#databases tbody.content").append("<tr>" + 
             "<th><a href='database.html?" + encodeURIComponent(dbName) + "'>" +
               dbName + "</a></th>" +
@@ -56,14 +63,34 @@ function CouchIndexPage() {
                 .find("td.size").text(prettyPrintSize(info.disk_size)).end()
                 .find("td.count").text(info.doc_count).end()
                 .find("td.seq").text(info.update_seq);
-              if (idx == dbs.length - 1) {
+              if (idx == dbsOnPage.length - 1) {
                 $(document.body).removeClass("loading");
               }
             }
           });
         });
         $("#databases tbody tr:odd").addClass("odd");
-        $("#databases tbody.footer tr td").text(dbs.length + " database(s)");
+
+        if (offset > 0) {
+          $("#paging a.prev").attr("href", "#" + (offset - maxPerPage)).click(function() {
+            page.updateDatabaseListing(offset - maxPerPage);
+          });
+        } else {
+          $("#paging a.prev").removeAttr("href");
+        }
+        if (offset + maxPerPage < dbs.length) {
+          $("#paging a.next").attr("href", "#" + (offset + maxPerPage)).click(function() {
+            page.updateDatabaseListing(offset + maxPerPage);
+          });
+        } else {
+          $("#paging a.next").removeAttr("href");
+        }
+
+        var firstNum = offset + 1;
+        var lastNum = firstNum + dbsOnPage.length - 1;
+        $("#databases tbody.footer tr td span").text(
+          "Showing " + firstNum + "-" + lastNum + " of " + dbs.length +
+          " databases");
       }
     });
   }