Paginate library/search

www/assets/js/callbacks.js

@@ -880,23 +880,6 @@ Callbacks = {
         $("#search_clear").remove();
         clearSearchResults();
         $("#library").data("entries", data.results);
-        if(data.results.length > 100) {
-            var pag = $("<div/>").addClass("pagination")
-                .attr("id", "search_pagination")
-                .insertAfter($("#library"));
-            var btns = $("<ul/>").appendTo(pag);
-            for(var i = 0; i < data.results.length / 100; i++) {
-                var li = $("<li/>").appendTo(btns);
-                (function(i) {
-                $("<a/>").attr("href", "javascript:void(0)")
-                    .text(i+1)
-                    .click(function() {
-                        loadSearchPage(i);
-                    })
-                    .appendTo(li);
-                })(i);
-            }
-        }
         $("<button/>").addClass("btn btn-block")
             .addClass("span12")
             .css("margin-left", "0")
@@ -906,7 +889,38 @@ Callbacks = {
                 clearSearchResults();
             })
             .insertBefore($("#library"));
-        loadSearchPage(0);
+        var p = $("#library").data("paginator");
+        if(p) {
+            p.items = data.results;
+            p.loadPage(0);
+        }
+        else {
+            var opts = {
+                preLoadPage: function () {
+                    $("#library").html("");
+                },
+
+                generator: function (item, page, index) {
+                    var li = makeSearchEntry(item, false);
+                    if(hasPermission("playlistadd")) {
+                        if(item.thumb) {
+                            addLibraryButtons(li, item.id, "yt");
+                        }
+                        else {
+                            addLibraryButtons(li, item.id);
+                        }
+                    }
+                    $(li).appendTo($("#library"));
+                },
+
+                itemsPerPage: 100
+            };
+
+            p = Paginate(data.results, opts);
+            p.paginator.insertBefore($("#library"))
+                .attr("id", "search_pagination");
+            $("#library").data("paginator", p);
+        }
     },
 
     /* REGION Polls */

www/assets/js/util.js

@@ -908,30 +908,9 @@ function handlePermissionChange() {
 function clearSearchResults() {
     $("#library").html("");
     $("#search_clear").remove();
-    $("#search_pagination").remove();
+    var p = $("#library").data("paginator");
-}
+    if(p) {
-
+        p.paginator.html("");
-function loadSearchPage(page) {
-    $("#library").html("");
-    var results = $("#library").data("entries");
-    var start = page * 100;
-    for(var i = start; i < start + 100 && i < results.length; i++) {
-        var li = makeSearchEntry(results[i], false);
-        if(hasPermission("playlistadd")) {
-            if(results[i].thumb) {
-                addLibraryButtons(li, results[i].id, "yt");
-            }
-            else {
-                addLibraryButtons(li, results[i].id);
-            }
-        }
-        $(li).appendTo($("#library"));
-    }
-    if($("#search_pagination").length > 0) {
-        $("#search_pagination").find("li").each(function() {
-            $(this).removeClass("active");
-        });
-        $($("#search_pagination").find("li")[page]).addClass("active");
     }
 }