Switch pagination on users in ACP

www/acp.html

@@ -254,6 +254,7 @@
     <!-- Mine -->
     <script src="./assets/js/iourl.js"></script>
     <script src="./assets/js/data.js"></script>
+    <script src="./assets/js/paginator.js"></script>
     <script src="./assets/js/util.js"></script>
     <script src="./assets/js/acp.js"></script>
   </body>

www/assets/js/acp.js

@@ -47,7 +47,25 @@ function tableResort(tbl, sortby) {
         tbl.data("sort_desc", !tbl.data("sort_desc"));
     else
         tbl.data("sortby", sortby)
-    loadPage(tbl, 0);
+    var sort_field = tbl.data("sortby");
+    var sort_desc = tbl.data("sort_desc");
+    var p = tbl.data("paginator");
+
+    if(sort_field) {
+        p.items.sort(function(a, b) {
+            var x = a[sort_field];
+            if(typeof x == "string")
+                x = x.toLowerCase();
+            var y = b[sort_field];
+            if(typeof y == "string")
+                y = y.toLowerCase();
+            var z = x == y ? 0 : (x < y ? -1 : 1);
+            if(sort_desc)
+                z = -z;
+            return z;
+        });
+    }
+    p.loadPage(0);
 }
 $("#userlookup_uid").click(function() {
     tableResort($("#userlookup table"), "id");
@@ -372,74 +390,64 @@ function setupCallbacks() {
     socket.on("acp-userdata", function(data) {
         var tbl = $("#userlookup table");
         if(data.length > 20) {
-            var pag = $("<div/>").addClass("pagination")
+            var opts = {
-                .attr("id", "userlookup_pagination")
+                preLoadPage: function () {
-                .insertAfter($("#userlookup table"));
+                    tbl.find("tbody").remove();
-            var btns = $("<ul/>").appendTo(pag);
+                },
-            for(var i = 0; i < data.length / 20; i++) {
+                generator: function (u, page, index) {
-                var li = $("<li/>").appendTo(btns);
+                    var tr = $("<tr/>").appendTo(tbl);
-                (function(i) {
+                    $("<td/>").text(u.id).appendTo(tr);
-                $("<a/>").attr("href", "javascript:void(0)")
+                    $("<td/>").text(u.uname).appendTo(tr);
-                    .text(i+1)
+                    var rank = $("<td/>").text(u.global_rank).appendTo(tr);
-                    .click(function() {
+                    $("<td/>").text(u.email).appendTo(tr);
-                        loadPage(tbl, i);
+                    $("<button/>").addClass("btn btn-mini")
-                    })
+                        .text("Reset password")
-                    .appendTo(li);
+                        .appendTo($("<td/>").appendTo(tr))
-                })(i);
+                        .click(function() {
-            }
+                            var reset = confirm("Really reset password?");
-            tbl.data("pagination", pag);
+                            if(reset) {
+                                socket.emit("acp-reset-password", {
+                                    name: u.uname,
+                                    email: u.email
+                                });
+                            }
+                        });
+                    rank.click(function() {
+                        if(this.find(".rank-edit").length > 0)
+                            return;
+                        var r = this.text();
+                        this.text("");
+                        var edit = $("<input/>").attr("type", "text")
+                            .attr("placeholder", r)
+                            .addClass("rank-edit")
+                            .appendTo(this)
+                            .focus();
+
+                        function save() {
+                            var r = this.val();
+                            var r2 = r;
+                            if(r.trim() == "")
+                                r = this.attr("placeholder");
+                            this.parent().text(this.attr("placeholder"));
+                            socket.emit("acp-set-rank", {
+                                name: u.uname,
+                                rank: parseInt(r)
+                            });
+                        }
+                        edit.blur(save.bind(edit));
+                        edit.keydown(function(ev) {
+                            if(ev.keyCode == 13)
+                                save.bind(edit)();
+                        });
+                    }.bind(rank));
+                }
+            };
+            var p = Paginate(data, opts);
+            p.paginator.insertBefore(tbl);
+            tbl.data("paginator", p);
         }
-        tbl.data("entries", data);
         tbl.data("sortby", "uname");
         tbl.data("sort_desc", false);
-        tbl.data("generator", function(u) {
-            var tr = $("<tr/>").appendTo($("#userlookup table"));
-            $("<td/>").text(u.id).appendTo(tr);
-            $("<td/>").text(u.uname).appendTo(tr);
-            var rank = $("<td/>").text(u.global_rank).appendTo(tr);
-            $("<td/>").text(u.email).appendTo(tr);
-            $("<button/>").addClass("btn btn-mini")
-                .text("Reset password")
-                .appendTo($("<td/>").appendTo(tr))
-                .click(function() {
-                    var reset = confirm("Really reset password?");
-                    if(reset) {
-                        socket.emit("acp-reset-password", {
-                            name: u.uname,
-                            email: u.email
-                        });
-                    }
-                });
-            rank.click(function() {
-                if(this.find(".rank-edit").length > 0)
-                    return;
-                var r = this.text();
-                this.text("");
-                var edit = $("<input/>").attr("type", "text")
-                    .attr("placeholder", r)
-                    .addClass("rank-edit")
-                    .appendTo(this)
-                    .focus();
-
-                function save() {
-                    var r = this.val();
-                    var r2 = r;
-                    if(r.trim() == "")
-                        r = this.attr("placeholder");
-                    this.parent().text(this.attr("placeholder"));
-                    socket.emit("acp-set-rank", {
-                        name: u.uname,
-                        rank: parseInt(r)
-                    });
-                }
-                edit.blur(save.bind(edit));
-                edit.keydown(function(ev) {
-                    if(ev.keyCode == 13)
-                        save.bind(edit)();
-                });
-            }.bind(rank));
-        });
-        loadPage($("#userlookup table"), 0);
     });
 
     socket.on("acp-set-rank", function(data) {