first version of pagination w00t w00t! it's a bit hacky i think, should be possible to improve this code and make it smaller and cleaner and etc.

serve.py

@@ -26,7 +26,7 @@ from aslite.db import load_features
 # -----------------------------------------------------------------------------
 # inits and globals
 
-RET_NUM = 100 # number of papers to return per page
+RET_NUM = 25 # number of papers to return per page
 
 app = Flask(__name__)
 
@@ -214,6 +214,7 @@ def main():
     opt_time_filter = request.args.get('time_filter', default_time_filter) # number of days to filter by
     opt_skip_have = request.args.get('skip_have', default_skip_have) # hide papers we already have?
     opt_svm_c = request.args.get('svm_c', '') # svm C parameter
+    opt_page_number = request.args.get('page_number', '1') # page number for pagination
 
     # if a query is given, override rank to be of type "search"
     # this allows the user to simply hit ENTER in the search field and have the correct thing happen
@@ -257,12 +258,19 @@ def main():
         keep = [i for i,pid in enumerate(pids) if pid not in have]
         pids, scores = [pids[i] for i in keep], [scores[i] for i in keep]
 
-    # crop the results
-    pids = pids[:min(len(pids), RET_NUM)]
+    # crop the number of results to RET_NUM, and paginate
+    try:
+        page_number = max(1, int(opt_page_number))
+    except ValueError:
+        page_number = 1
+    start_index = (page_number - 1) * RET_NUM # desired starting index
+    end_index = min(start_index + RET_NUM, len(pids)) # desired ending index
+    pids = pids[start_index:end_index]
+    scores = scores[start_index:end_index]
 
     # render all papers to just the information we need for the UI
     papers = [render_pid(pid) for pid in pids]
-    for i, p  in enumerate(papers):
+    for i, p in enumerate(papers):
         p['weight'] = float(scores[i])
 
     # build the current tags for the user, and append the special 'all' tag
@@ -285,6 +293,9 @@ def main():
     context['gvars']['skip_have'] = opt_skip_have
     context['gvars']['search_query'] = opt_q
     context['gvars']['svm_c'] = str(C)
+    context['gvars']['page_number'] = str(page_number)
+    context['gvars']['prev_page_number'] = str(page_number - 1)
+    context['gvars']['next_page_number'] = str(page_number + 1)
     return render_template('index.html', **context)
 
 @app.route('/inspect', methods=['GET'])

static/style.css

@@ -262,6 +262,9 @@ body {
 #time_filter_field {
     width: 20px;
 }
+#page_number_field {
+    width: 20px;
+}
 #svm_c_field {
     width: 30px;
 }
@@ -281,3 +284,11 @@ body {
 	}
 
 }
+#pagination {
+    text-align: center;
+    margin-bottom: 20px;
+}
+#link-prev-page, #link-next-page {
+    margin: 0 5px 0 5px;
+    font-size: 16px;
+}

templates/index.html

@@ -10,6 +10,44 @@ var gvars = {{ gvars | tojson }};
 </script>
 {% endblock %}
 
+<script>
+/*
+The JS code in here handles pagination. I really quite dislike it,
+if anyone can think of a cleaner and shorter way please let me know.
+*/
+
+// mod from https://stackoverflow.com/questions/13063838/add-change-parameter-of-url-and-redirect-to-the-new-url/13064060
+function setGetParameter(paramName, paramValue)
+{
+    var url = window.location.href;
+    var hash = location.hash;
+    url = url.replace(hash, ''); // ?
+    if (url.indexOf(paramName + "=") >= 0) {
+        var prefix = url.substring(0, url.indexOf(paramName + "="));
+        var suffix = url.substring(url.indexOf(paramName + "="));
+        suffix = suffix.substring(suffix.indexOf("=") + 1);
+        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
+        url = prefix + paramName + "=" + paramValue + suffix;
+    } else {
+        var pre = url.indexOf("?") < 0 ? "?" : "&";
+        url = url + pre + paramName + "=" + paramValue;
+    }
+    window.location.href = url + hash;
+}
+
+// handle pagination by overriding the a href= links
+window.onload = function() {
+    document.getElementById("link-prev-page").onclick = function() {
+        setGetParameter("page", gvars.page - 1);
+        return true;
+    }
+    document.getElementById("link-next-page").onclick = function() {
+        setGetParameter("page", gvars.page + 1);
+        return true;
+    }
+}
+</script>
+
 {% block content %}
 
 {% if not user %}
@@ -86,8 +124,16 @@ var gvars = {{ gvars | tojson }};
 </div>
 {% endif %}
 
+<!-- main content showing all the papers as a list -->
 <div id="wrap">
 </div>
+
+<!-- links to previous and next pages -->
+<div id="pagination">
+    <a href="/?page_number={{ gvars.prev_page_number }}" id="link-prev-page">prev</a>
+    <span>current page: {{ gvars.page_number }} </span>
+    <a href="/?page_number={{ gvars.next_page_number }}" id="link-next-page">next</a>
+</div>
 {% endblock %}
 
 {% block elements %}