Pagination improvement for TPS UI.

The TPS UI has been modified to provide buttons to go to the first
page, previous page, next page, and last page. The UI will also show
the total entries, the current page number, and the total number of
pages. Users can jump to a specific page by entering the page number.

The CSS has been modified to allow better control of UI components.
The UI table now has a default size of 5. It's no longer necessary
to specify the size in each table.

Ticket #848

20 files changed, 322 insertions, 111 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index cbdd9205a..8802d4162 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -74,9 +74,50 @@ table tr th:first-child, table tr td:first-child {
 }
 
 table input[type="checkbox"] + label {
+  margin: 0;
   padding: 0 0 0 13px;
 }
 
+.pagination {
+  margin: 4px;
+}
+
+.pki-table-actions {
+  padding: 1px;
+  border-top: none;
+}
+
+.pki-table-actions button {
+  padding: 3px 8px;
+  font-size: 11px;
+  box-shadow: 1px 2px 2px #e3e3e3;
+  margin: 4px 4px 4px 0;
+}
+
+.pki-table-actions input[name="page"] {
+  width: 50px;
+  min-width: 50px;
+}
+
+.pki-table-actions span[name="actions"] {
+  float: right;
+}
+
+.pki-table-actions span[name="info"] {
+  line-height: 26px;
+  margin: 4px;
+  display: inline-block;
+}
+
+table span[name="page-controls"] {
+  float: right;
+}
+
+table span[name="page-jump"] {
+  margin: 0 8px 0 0;
+  float: right;
+}
+
 #content {
   margin: 20px;
 }
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 00c9f05c7..056607a76 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -48,7 +48,7 @@ var Collection = Backbone.Collection.extend({
 
         self.options = options;
         self.links = {};
-        self.filter(null);
+        self.query({});
     },
     url: function() {
         return this.currentURL;
@@ -56,6 +56,9 @@ var Collection = Backbone.Collection.extend({
     parse: function(response) {
         var self = this;
 
+        // get total entries
+        self.total = self.getTotal(response);
+
         // parse links
         var links = self.getLinks(response);
         links = links == undefined ? [] : [].concat(links);
@@ -73,6 +76,9 @@ var Collection = Backbone.Collection.extend({
 
         return models;
     },
+    getTotal: function(response) {
+        return response.total;
+    },
     getEntries: function(response) {
         return null;
     },
@@ -95,23 +101,25 @@ var Collection = Backbone.Collection.extend({
         return this.links[name];
     },
     go: function(name) {
-        if (this.links[name] == undefined) return;
-        this.currentURL = this.links[name];
+        var self = this;
+        if (self.links[name] == undefined) return;
+        self.currentURL = self.links[name];
     },
-    filter: function(filter) {
+    query: function(params) {
         var self = this;
 
+        // add default options into the params
+        _.defaults(params, self.options);
+
+        // generate query string
         var query = "";
-        _(self.options).each(function(value, name) {
+        _(params).each(function(value, name) {
+            // skip null or empty string, but don't skip 0
+            if (value === null || value === "") return;
             query = query == "" ? "?" : query + "&";
             query = query + name + "=" + encodeURIComponent(value);
         });
 
-        if (filter) {
-            query = query == "" ? "?" : query + "&";
-            query = query + "filter=" + encodeURIComponent(filter);
-        }
-
         self.currentURL = self.urlRoot + query;
     }
 });
@@ -450,13 +458,21 @@ var Table = Backbone.View.extend({
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
 
+        // number of table rows
+        self.pageSize = options.pageSize || 5;
+
+        // current page: 1, 2, 3, ...
+        self.page = 1;
+        self.totalPages = 1;
+
         self.thead = $("thead", self.$el);
 
         // setup search field handler
-        $("input[name='search']", self.thead).keypress(function(e) {
+        self.searchField = $("input[name='search']", self.thead);
+        self.searchField.keypress(function(e) {
             if (e.which == 13) {
-                var input = $(e.target);
-                self.collection.filter(input.val());
+                // show the first page of search results
+                self.page = 1;
                 self.render();
             }
         });
@@ -505,17 +521,43 @@ var Table = Backbone.View.extend({
         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.totalEntriesField = $("span[name='totalEntries']", self.tfoot);
+        self.pageField = $("input[name='page']", self.tfoot);
+        self.totalPagesField = $("span[name='totalPages']", self.tfoot);
+
+        // setup page jump handler
+        self.pageField.keypress(function(e) {
+            if (e.which == 13) {
+                // parse user entered page number
+                self.page = parseInt(self.pageField.val());
+                if (isNaN(self.page)) self.page = 1;
+
+                // make sure 1 <= page <= total pages
+                self.page = Math.max(self.page, 1);
+                self.page = Math.min(self.page, self.totalPages);
+                self.render();
+            }
+        });
+
+        // setup handlers for first, prev, next, and last buttons
+        $("a[name='first']", self.tfoot).click(function(e) {
+            self.page = 1;
             self.render();
             e.preventDefault();
         });
-        $("a.next", self.tfoot).click(function(e) {
-            if (self.collection.link("next") == undefined) return;
-            self.collection.go("next");
+        $("a[name='prev']", self.tfoot).click(function(e) {
+            self.page = Math.max(self.page - 1, 1);
+            self.render();
+            e.preventDefault();
+        });
+        $("a[name='next']", self.tfoot).click(function(e) {
+            self.page = Math.min(self.page + 1, self.totalPages);
+            self.render();
+            e.preventDefault();
+        });
+        $("a[name='last']", self.tfoot).click(function(e) {
+            self.page = self.totalPages;
             self.render();
             e.preventDefault();
         });
@@ -524,12 +566,31 @@ var Table = Backbone.View.extend({
     },
     render: function() {
         var self = this;
+
+        // set query based on current page, page size, and filter
+        self.collection.query({
+            start: (self.page - 1) * self.pageSize,
+            size: self.pageSize,
+            filter: self.searchField.val()
+        });
+
+        // fetch data based on query
         self.collection.fetch({
             reset: true,
             success: function(collection, response, options) {
                 self.tbody.empty();
 
-                // display result page
+                // display total entries
+                self.totalEntriesField.text(self.collection.total);
+
+                // display current page number
+                self.pageField.val(self.page);
+
+                // calculate and display total number of pages
+                self.totalPages = Math.floor(Math.max(0, self.collection.total - 1) / self.pageSize) + 1;
+                self.totalPagesField.text(self.totalPages);
+
+                // display entries in the current page
                 _(self.collection.models).each(function(model) {
                     var item = new TableItem({
                         el: self.template.clone(),
@@ -540,16 +601,14 @@ var Table = Backbone.View.extend({
                     self.tbody.append(item.$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++) {
-                        var item = new BlankTableItem({
-                            el: self.template.clone()
-                        });
-                        item.render();
-                        self.tbody.append(item.$el);
-                    }
+                // add blank rows to keep page size consistent
+                var blanks = self.pageSize - self.collection.models.length;
+                for (var i = 0; i < blanks; i++) {
+                    var item = new BlankTableItem({
+                        el: self.template.clone()
+                    });
+                    item.render();
+                    self.tbody.append(item.$el);
                 }
             },
             error: function(collection, response, options) {
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index fdde68986..35ea96b28 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -77,7 +77,7 @@ var ActivityPage = Page.extend({
 
         new Table({
             el: $("table[name='activities']"),
-            collection: new ActivityCollection({ size: 5 }),
+            collection: new ActivityCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index bdbe1f839..83a7805a8 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -134,7 +134,7 @@ var AuthenticatorPage = Page.extend({
 
         new Table({
             el: $("table[name='authenticators']"),
-            collection: new AuthenticatorCollection({ size: 5 }),
+            collection: new AuthenticatorCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index cd4164dee..9163db4fb 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -83,7 +83,7 @@ var CertificatePage = Page.extend({
 
         new Table({
             el: $("table[name='certificates']"),
-            collection: new CertificateCollection({ size: 5 }),
+            collection: new CertificateCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index a796cec7f..c55cad0f7 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -134,7 +134,7 @@ var ConnectionPage = Page.extend({
 
         new Table({
             el: $("table[name='connections']"),
-            collection: new ConnectionCollection({ size: 5 }),
+            collection: new ConnectionCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 4f03d6932..fe558133e 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -72,7 +72,7 @@ var GroupPage = Page.extend({
 
         new Table({
             el: $("table[name='groups']"),
-            collection: new GroupCollection({ size: 5 }),
+            collection: new GroupCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 5b8d06e2b..dde917f17 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -134,7 +134,7 @@ var ProfilePage = Page.extend({
 
         new Table({
             el: $("table[name='profiles']"),
-            collection: new ProfileCollection({ size: 5 }),
+            collection: new ProfileCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index 9104c6c6f..c4991e7b3 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -70,7 +70,7 @@ var SelfTestPage = Page.extend({
 
         new Table({
             el: $("table[name='selftests']"),
-            collection: new SelfTestCollection({ size: 5 }),
+            collection: new SelfTestCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index b9686f10e..573e40eaf 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -93,7 +93,7 @@ var TokenPage = Page.extend({
 
         new Table({
             el: $("table[name='tokens']"),
-            collection: new TokenCollection({ size: 5 }),
+            collection: new TokenCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index abcac34dd..68f501137 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -136,7 +136,7 @@ var UserPage = Page.extend({
 
         new Table({
             el: $("table[name='users']"),
-            collection: new UserCollection({ size: 5 }),
+            collection: new UserCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
index 04995e572..2e96bb82e 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -20,9 +20,12 @@
 <table name="activities">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="8">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="8">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -50,11 +53,21 @@
 </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 class="pki-table-actions" colspan="8">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
index c7e0e3e96..771fe2e7b 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
@@ -20,9 +20,11 @@
 <table name="authenticators">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index c454170d1..997b7c06c 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -20,9 +20,12 @@
 <table name="certificates">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="10">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="10">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -54,11 +57,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="10">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="10">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connections.html b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
index 0d4384703..6f401f56f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
@@ -20,9 +20,11 @@
 <table name="connections">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index a835180b7..b0e8fedb1 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -20,9 +20,11 @@
 <table name="groups">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,10 +45,20 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
index 57c86df10..95b556257 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
@@ -20,9 +20,11 @@
 <table name="profiles">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index d184703c8..c67717631 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -20,9 +20,12 @@
 <table name="selftests">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="6">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="6">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -46,11 +49,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="6">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="6">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index 3edcd2cd4..cb8d1a88b 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -20,9 +20,11 @@
 <table name="tokens">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="9">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="9">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -55,11 +57,21 @@
 </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 class="pki-table-actions" colspan="9">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index 4757ff5d9..a23fdbb8b 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -20,9 +20,11 @@
 <table name="users">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>