Generalise pagination and paginate phenotypes

Generalise the code generating table pagination UI, and use it to
paginate the list of phenotypes.

2 files changed, 29 insertions, 3 deletions

diff --git a/uploader/templates/macro-table-pagination.html b/uploader/templates/macro-table-pagination.html
new file mode 100644
index 0000000..292c531
--- /dev/null
+++ b/uploader/templates/macro-table-pagination.html
@@ -0,0 +1,26 @@
+{%macro table_pagination(start_at, page_count, total_count, base_uri, name)%}
+{%set ns = namespace(forward_uri=base_uri, back_uri=base_uri)%}
+{%set ns.forward_uri="brr"%}
+  <div class="row">
+    <div class="col-md-2" style="text-align: start;">
+      {%if start_at > 0%}
+      <a href="{{base_uri +
+               '?start_at='+((start_at-page_count)|string) +
+               '&count='+(page_count|string)}}">
+                 <span class="glyphicon glyphicon-backward"></span>
+                 Previous
+        </a>
+      {%endif%}
+    </div>
+    <div class="col-md-8" style="text-align: center;">
+      Displaying {{name}} {{start_at+1}} to {{start_at+page_count if start_at+page_count < total_count else total_count}} of {{total_count}}</div>
+      <div class="col-md-2" style="text-align: end;">
+        {%if start_at + page_count < total_count%}
+        <a href="{{base_uri +
+                 '?start_at='+((start_at+page_count)|string) +
+                 '&count='+(page_count|string)}}">
+            Next<span class="glyphicon glyphicon-forward"></span></a>
+        {%endif%}
+      </div>
+  </div>
+{%endmacro%}
diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index e2ccb60..5a17755 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -1,5 +1,6 @@
 {%extends "phenotypes/base.html"%}
 {%from "flash_messages.html" import flash_all_messages%}
+{%from "macro-table-pagination.html" import table_pagination%}
 {%from "populations/macro-display-population-card.html" import display_population_card%}
 
 {%block title%}Phenotypes{%endblock%}
@@ -51,9 +52,8 @@
   <h2>Phenotype Data</h2>
 
   <p>This dataset has a total of {{phenotype_count}} phenotypes.</p>
-  <p class="text-warning">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
-    Display pagination controls here &hellip;</p>
+
+  {{table_pagination(start_from, count, phenotype_count, url_for('species.populations.phenotypes.view_dataset', species_id=species.SpeciesId, population_id=population.Id, dataset_id=dataset.Id), "phenotypes")}}
 
   <table class="table">
     <thead>