Added paging links.

The UI tables have been modified to provide Prev and Next links
to navigate through the result pages.

Ticket #654

19 files changed, 313 insertions, 183 deletions

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 35363b0f7..c94a04fa2 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -19,6 +19,72 @@
  * @author Endi S. Dewata
  */
 
+var Collection = Backbone.Collection.extend({
+    urlRoot: null,
+    initialize: function(options) {
+        var self = this;
+
+        // convert options into URL query
+        var query = "";
+        _(options).each(function(value, name) {
+            query = query == "" ? "?" : query + "&";
+            query = query + name + "=" + encodeURIComponent(value);
+        });
+
+        self.options = options;
+        self.currentURL = self.urlRoot + query;
+        self.links = {};
+    },
+    url: function() {
+        return this.currentURL;
+    },
+    parse: function(response) {
+        var self = this;
+
+        // parse links
+        var links = self.getLinks(response);
+        links = links == undefined ? [] : [].concat(links);
+        self.parseLinks(links);
+
+        // convert entries into models
+        var models = [];
+        var entries = self.getEntries(response);
+        entries = entries == undefined ? [] : [].concat(entries);
+
+        _(entries).each(function(entry) {
+            var model = self.parseEntry(entry);
+            models.push(model);
+        });
+
+        return models;
+    },
+    getEntries: function(response) {
+        return null;
+    },
+    getLinks: function(response) {
+        return null;
+    },
+    parseEntry: function(entry) {
+        return null;
+    },
+    parseLinks: function(links) {
+        var self = this;
+        self.links = {};
+        _(links).each(function(link) {
+            var name = link["@rel"];
+            var href = link["@href"];
+            self.links[name] = href;
+        });
+    },
+    link: function(name) {
+        return this.links[name];
+    },
+    go: function(name) {
+        if (this.links[name] == undefined) return;
+        this.currentURL = this.links[name];
+    }
+});
+
 var TableItemView = Backbone.View.extend({
     render: function() {
         var self = this;
@@ -34,14 +100,34 @@ var TableItemView = Backbone.View.extend({
 var TableView = Backbone.View.extend({
     initialize: function() {
         var self = this;
+
         self.tbody = $("tbody", self.el);
         self.template = $("tr", self.tbody).detach();
+
+        // attach link handlers
+        self.tfoot = $("tfoot", self.el);
+        $("a.prev", self.tfoot).click(function(e) {
+            if (self.collection.link("prev") == undefined) return;
+            self.collection.go("prev");
+            self.render();
+            e.preventDefault();
+        });
+        $("a.next", self.tfoot).click(function(e) {
+            if (self.collection.link("next") == undefined) return;
+            self.collection.go("next");
+            self.render();
+            e.preventDefault();
+        });
+
         self.render();
     },
     render: function() {
         var self = this;
         self.collection.fetch({
             success: function() {
+                self.tbody.empty();
+
+                // display result page
                 _(self.collection.models).each(function(item) {
                     var itemView = new TableItemView({
                         el: self.template.clone(),
@@ -50,6 +136,14 @@ var TableView = Backbone.View.extend({
                     itemView.render();
                     self.tbody.append(itemView.el);
                 }, self);
+
+                // add blank lines
+                if (self.collection.options.size != undefined) {
+                    var blanks = self.collection.options.size - self.collection.models.length;
+                    for (var i = 0; i < blanks; i++) {
+                        self.tbody.append(self.template.clone());
+                    }
+                }
             }
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/activities.html b/base/tps-tomcat/shared/webapps/tps/activities.html
index 5685edbd2..82759c70d 100644
--- a/base/tps-tomcat/shared/webapps/tps/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/activities.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='activities']"),
-        collection: new ActivityCollection()
+        collection: new ActivityCollection({ size: 3 })
     });
 });
     </script>
@@ -65,6 +65,16 @@ $(function() {
         <td name="date">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="7">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/authenticators.html b/base/tps-tomcat/shared/webapps/tps/authenticators.html
index c4d1d9e2b..075b66069 100644
--- a/base/tps-tomcat/shared/webapps/tps/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/authenticators.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='authenticators']"),
-        collection: new AuthenticatorCollection()
+        collection: new AuthenticatorCollection({ size: 3 })
     });
 });
     </script>
@@ -55,6 +55,16 @@ $(function() {
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="2">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/certs.html b/base/tps-tomcat/shared/webapps/tps/certs.html
index 89f2cc2fb..39cab34bc 100644
--- a/base/tps-tomcat/shared/webapps/tps/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/certs.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='certificates']"),
-        collection: new CertificateCollection()
+        collection: new CertificateCollection({ size: 3 })
     });
 });
     </script>
@@ -69,6 +69,16 @@ $(function() {
         <td name="modifyTime">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="9">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/connections.html b/base/tps-tomcat/shared/webapps/tps/connections.html
index d34d0e418..cd9ba86cb 100644
--- a/base/tps-tomcat/shared/webapps/tps/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/connections.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='connections']"),
-        collection: new ConnectionCollection()
+        collection: new ConnectionCollection({ size: 3 })
     });
 });
     </script>
@@ -55,6 +55,16 @@ $(function() {
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="2">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/groups.html b/base/tps-tomcat/shared/webapps/tps/groups.html
index 236b7706e..1e63c4597 100644
--- a/base/tps-tomcat/shared/webapps/tps/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/groups.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='groups']"),
-        collection: new GroupCollection()
+        collection: new GroupCollection({ size: 3 })
     });
 });
     </script>
@@ -55,6 +55,16 @@ $(function() {
         <td name="description">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="2">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             </span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index 425bf6836..5b50120bb 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -23,29 +23,23 @@ var ActivityModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/activities"
 });
 
-var ActivityCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/activities";
+var ActivityCollection = Collection.extend({
+    urlRoot: "/tps/rest/activities",
+    getEntries: function(response) {
+        return response.Activities.Activity;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Activities.Activity;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new ActivityModel({
-                id: item["@id"],
-                tokenID: item.TokenID,
-                userID: item.UserID,
-                ip: item.IP,
-                operation: item.Operation,
-                result: item.Result,
-                date: item.Date
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Activities.Link;
+    },
+    parseEntry: function(entry) {
+        return new ActivityModel({
+            id: entry["@id"],
+            tokenID: entry.TokenID,
+            userID: entry.UserID,
+            ip: entry.IP,
+            operation: entry.Operation,
+            result: entry.Result,
+            date: entry.Date
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 13cc33eb8..d2999b298 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -23,24 +23,18 @@ var AuthenticatorModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/authenticators"
 });
 
-var AuthenticatorCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/authenticators";
+var AuthenticatorCollection = Collection.extend({
+    urlRoot: "/tps/rest/authenticators",
+    getEntries: function(response) {
+        return response.Authenticators.Authenticator;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Authenticators.Authenticator;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new AuthenticatorModel({
-                id: item["@id"],
-                status: item.Status
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Authenticators.Link;
+    },
+    parseEntry: function(entry) {
+        return new AuthenticatorModel({
+            id: entry["@id"],
+            status: entry.Status
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index 4db3bd274..6b9d58bc9 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -23,31 +23,25 @@ var CertificateModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/certs"
 });
 
-var CertificateCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/certs";
+var CertificateCollection = Collection.extend({
+    urlRoot: "/tps/rest/certs",
+    getEntries: function(response) {
+        return response.Certificates.Certificate;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Certificates.Certificate;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new CertificateModel({
-                id: item["@id"],
-                serialNumber: item.SerialNumber,
-                subject: item.Subject,
-                tokenID: item.TokenID,
-                userID: item.UserID,
-                keyType: item.KeyType,
-                status: item.Status,
-                createTime: item.CreateTime,
-                modifyTime: item.ModifyTime
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Certificates.Link;
+    },
+    parseEntry: function(entry) {
+        return new CertificateModel({
+            id: entry["@id"],
+            serialNumber: entry.SerialNumber,
+            subject: entry.Subject,
+            tokenID: entry.TokenID,
+            userID: entry.UserID,
+            keyType: entry.KeyType,
+            status: entry.Status,
+            createTime: entry.CreateTime,
+            modifyTime: entry.ModifyTime
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 8fe52d6a3..4d5927e9f 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -23,24 +23,18 @@ var ConnectionModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/connections"
 });
 
-var ConnectionCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/connections";
+var ConnectionCollection = Collection.extend({
+    urlRoot: "/tps/rest/connections",
+    getEntries: function(response) {
+        return response.Connections.Connection;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Connections.Connection;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new ConnectionModel({
-                id: item["@id"],
-                status: item.Status
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Connections.Link;
+    },
+    parseEntry: function(entry) {
+        return new ConnectionModel({
+            id: entry["@id"],
+            status: entry.Status
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 6ab4c0de5..4d035073d 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -23,24 +23,18 @@ var GroupModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/admin/groups"
 });
 
-var GroupCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/admin/groups";
+var GroupCollection = Collection.extend({
+    urlRoot: "/tps/rest/admin/groups",
+    getEntries: function(response) {
+        return response.Groups.Group;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Groups.Group;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new GroupModel({
-                id: item["@id"],
-                description: item.Description
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Groups.Link;
+    },
+    parseEntry: function(entry) {
+        return new GroupModel({
+            id: entry["@id"],
+            description: entry.Description
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 54afc4324..583ec4191 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -23,24 +23,18 @@ var ProfileModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/profiles"
 });
 
-var ProfileCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/profiles";
+var ProfileCollection = Collection.extend({
+    urlRoot: "/tps/rest/profiles",
+    getEntries: function(response) {
+        return response.Profiles.Profile;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Profiles.Profile;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new ProfileModel({
-                id: item["@id"],
-                status: item.Status
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Profiles.Link;
+    },
+    parseEntry: function(entry) {
+        return new ProfileModel({
+            id: entry["@id"],
+            status: entry.Status
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index 8753d98c6..89208a1dc 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -23,27 +23,21 @@ var SelfTestModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/selftests"
 });
 
-var SelfTestCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/selftests";
+var SelfTestCollection = Collection.extend({
+    urlRoot: "/tps/rest/selftests",
+    getEntries: function(response) {
+        return response.SelfTests.SelfTest;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.SelfTests.SelfTest;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new SelfTestModel({
-                id: item["@id"],
-                enabledAtStartup: item.EnabledAtStartup,
-                criticalAtStartup: item.CriticalAtStartup,
-                enabledOnDemand: item.EnabledOnDemand,
-                criticalOnDemand: item.CriticalOnDemand,
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.SelfTests.Link;
+    },
+    parseEntry: function(entry) {
+        return new SelfTestModel({
+            id: entry["@id"],
+            enabledAtStartup: entry.EnabledAtStartup,
+            criticalAtStartup: entry.CriticalAtStartup,
+            enabledOnDemand: entry.EnabledOnDemand,
+            criticalOnDemand: entry.CriticalOnDemand,
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index 4ff39554c..e5d13894e 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -23,30 +23,24 @@ var TokenModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/tokens"
 });
 
-var TokenCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/tokens";
+var TokenCollection = Collection.extend({
+    urlRoot: "/tps/rest/tokens",
+    getEntries: function(response) {
+        return response.Tokens.Token;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Tokens.Token;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new TokenModel({
-                id: item["@id"],
-                userID: item.UserID,
-                status: item.Status,
-                reason: item.Reason,
-                appletID: item.AppletID,
-                keyInfo: item.KeyInfo,
-                created: item.CreateTimestamp,
-                modified: item.ModifyTimestamp
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Tokens.Link;
+    },
+    parseEntry: function(entry) {
+        return new TokenModel({
+            id: entry["@id"],
+            userID: entry.UserID,
+            status: entry.Status,
+            reason: entry.Reason,
+            appletID: entry.AppletID,
+            keyInfo: entry.KeyInfo,
+            created: entry.CreateTimestamp,
+            modified: entry.ModifyTimestamp
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index 6c112a648..3a6a90465 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -23,24 +23,18 @@ var UserModel = Backbone.Model.extend({
     urlRoot: "/tps/rest/admin/users"
 });
 
-var UserCollection = Backbone.Collection.extend({
-    url: function() {
-        return "/tps/rest/admin/users";
+var UserCollection = Collection.extend({
+    urlRoot: "/tps/rest/admin/users",
+    getEntries: function(response) {
+        return response.Users.User;
     },
-    parse: function(response) {
-        var models = [];
-
-        var list = response.Users.User;
-        list = list == undefined ? [] : [].concat(list);
-
-        _(list).each(function(item) {
-            var model = new UserModel({
-                id: item["@id"],
-                fullName: item.FullName
-            });
-            models.push(model);
+    getLinks: function(response) {
+        return response.Users.Link;
+    },
+    parseEntry: function(entry) {
+        return new UserModel({
+            id: entry["@id"],
+            fullName: entry.FullName
         });
-
-        return models;
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/profiles.html b/base/tps-tomcat/shared/webapps/tps/profiles.html
index c3c1ea140..a31389e64 100644
--- a/base/tps-tomcat/shared/webapps/tps/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/profiles.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='profiles']"),
-        collection: new ProfileCollection()
+        collection: new ProfileCollection({ size: 3 })
     });
 });
     </script>
@@ -55,6 +55,16 @@ $(function() {
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="2">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/selftests.html b/base/tps-tomcat/shared/webapps/tps/selftests.html
index 40cbfc55b..f443305e6 100644
--- a/base/tps-tomcat/shared/webapps/tps/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/selftests.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='selftests']"),
-        collection: new SelfTestCollection()
+        collection: new SelfTestCollection({ size: 3 })
     });
 });
     </script>
@@ -61,6 +61,16 @@ $(function() {
         <td name="criticalOnDemand">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="5">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/tokens.html b/base/tps-tomcat/shared/webapps/tps/tokens.html
index 5b042c55b..c5c4e5838 100644
--- a/base/tps-tomcat/shared/webapps/tps/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/tokens.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='tokens']"),
-        collection: new TokenCollection()
+        collection: new TokenCollection({ size: 3 })
     });
 });
     </script>
@@ -67,6 +67,16 @@ $(function() {
         <td name="modified">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="8">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>
diff --git a/base/tps-tomcat/shared/webapps/tps/users.html b/base/tps-tomcat/shared/webapps/tps/users.html
index 5f6bd0173..3eeec8118 100644
--- a/base/tps-tomcat/shared/webapps/tps/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/users.html
@@ -27,7 +27,7 @@
 $(function() {
     new TableView({
         el: $("table[name='users']"),
-        collection: new UserCollection()
+        collection: new UserCollection({ size: 3 })
     });
 });
     </script>
@@ -55,6 +55,16 @@ $(function() {
         <td name="fullName">&nbsp;</td>
     </tr>
 </tbody>
+<tfoot>
+    <tr>
+         <th class="rcue-table-actions" colspan="2">
+             <span>
+                 <a href="#" class="prev">Prev</a>
+                 <a href="#" class="next">Next</a>
+             <span>
+         </th>
+    </tr>
+</tfoot>
 </table>
 
 </body>