1 files changed, 55 insertions, 21 deletions
diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index 4e1be6b..306dcce 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -5,11 +5,6 @@
 
 {%block title%}Phenotypes{%endblock%}
 
-{%block css%}
-<link rel="stylesheet"
-      href="{{url_for('base.datatables', filename='css/jquery.dataTables.css')}}" />
-{%endblock%}
-
 {%block pagetitle%}Phenotypes{%endblock%}
 
 {%block lvl4_breadcrumbs%}
@@ -61,10 +56,21 @@
 
 <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>
+</div>
+
+
+<div class="row">
+
+  <table id="tbl-phenotypes-list" class="table compact stripe cell-border">
     <thead>
       <tr>
-        <th>#</th>
+        <th></th>
+        <th>Index</th>
         <th>Record</th>
         <th>Description</th>
       </tr>
@@ -81,17 +87,29 @@
 
 
 {%block javascript%}
-<script src="{{url_for('base.datatables',
-                 filename='js/jquery.dataTables.js')}}"></script>
 <script type="text/javascript">
   $(function() {
-      $("#tbl-phenotypes-list").DataTable({
-          responsive: true,
-          data: {{phenotypes | tojson}},
-          columns: [
-              {data: "sequence_number"},
+      var species_id = {{species.SpeciesId}};
+      var population_id = {{population.Id}};
+      var dataset_id = {{dataset.Id}};
+      var dataset_name = "{{dataset.Name}}";
+      var data = {{phenotypes | tojson}};
+
+      var dtPhenotypesList = buildDataTable(
+          "#tbl-phenotypes-list",
+          data,
+          [
               {
                   data: function(pheno) {
+                      return `<input type="checkbox" name="selected-phenotypes" `
+                          + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `value="${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `class="chk-row-select" />`
+                  }
+              },
+              {data: "sequence_number"},
+              {
+                  data: function(pheno, type, set, meta) {
                       var spcs_id = {{species.SpeciesId}};
                       var pop_id = {{population.Id}};
                       var dtst_id = {{dataset.Id}};
@@ -104,13 +122,29 @@
                           `</a>`;
                   }
               },
-              {data: function(pheno) {
-                  return (pheno.Post_publication_description ||
-                          pheno.Original_description ||
-                          pheno.Pre_publication_description);
-              }}
-          ]
-      });
+              {
+                  data: function(pheno) {
+                      return (pheno.Post_publication_description ||
+                              pheno.Original_description ||
+                              pheno.Pre_publication_description);
+                  }
+              }
+          ],
+          {
+              select: "multi+shift",
+              layout: {
+                  top1Start: {
+                      pageLength: {
+                          text: "Show _MENU_ of _TOTAL_"
+                      }
+                  },
+                  topStart: "info",
+                  top1End: null
+              },
+              rowId: function(pheno) {
+                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
+              }
+          });
   });
 </script>
 {%endblock%}