Improve list-phenotypes page.

1 files changed, 16 insertions, 2 deletions

diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index 7507ff5..c896214 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -56,7 +56,13 @@
 
 <div class="row">
   <h2>Phenotype Data</h2>
-  <table id="tbl-phenotypes-list" class="table">
+
+  <p>Click on any of the phenotypes in the table below to view and edit that
+    phenotype's data.</p>
+  <p>Use the search to filter through all the phenotypes and find specific
+    phenotypes of interest.</p>
+
+  <table id="tbl-phenotypes-list" class="table compact stripe">
     <thead>
       <tr>
         <th></th>
@@ -78,9 +84,17 @@
 {%block javascript%}
 <script type="text/javascript">
   $(function() {
+      var data = {{phenotypes | tojson}};
       $("#tbl-phenotypes-list").DataTable({
           responsive: true,
-          data: {{phenotypes | tojson}},
+          lengthMenu: [10, 25, 50, 100, 1000, data.length],
+          language: {
+              processing: "Processing results… Please wait.",
+              loadingRecord: "Loading phenotypes — Please wait.",
+              info: "_START_ to _END_ of _TOTAL_ phenotypes",
+              lengthMenu: "Show _MENU_ phenotypes",
+          },
+          data: data,
           columns: [
               {data: "sequence_number"},
               {