Genenetwork: Initialise datatable for genetic markers.

1 files changed, 47 insertions, 11 deletions

diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html
index fd84c2f..be297a4 100644
--- a/uploader/templates/genotypes/list-genotypes.html
+++ b/uploader/templates/genotypes/list-genotypes.html
@@ -54,17 +54,34 @@
 </div>
 
 <div class="row">
-  <h2>Genetic Markers</h2>
-  <p>There are a total of {{total_markers}} currently registered genetic markers
-    for the "{{species.FullName}}" species. You can click
-    <a href="{{url_for('species.populations.genotypes.list_markers',
-             species_id=species.SpeciesId,
-             population_id=population.Id)}}"
-       title="View genetic markers for species '{{species.FullName}}"
-       target="_blank">
-      here to view the genetic markers
-    </a>.
-  </p>
+  <h2 class="subheading">Genetic Markers</h2>
+
+  <table id="tbl-genetic-markers" class="table compact stripe cell-border"
+         data-genetic-markers='{{genetic_markers | tojson}}'>
+    <thead>
+      <tr>
+        <th title="">Index</th>
+        <th title="">Marker Name</th>
+        <th title="Chromosome">Chr</th>
+        <th title="Physical location of the marker in megabasepairs">
+          Location (Mb)</th>
+        <th title="">Source</th>
+        <th title="">Source2</th>
+    </thead>
+
+    <tbody>
+      {%for marker in markers%}
+      <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      {%endfor%}
+    </tbody>
+  </table>
 </div>
 
 <div class="row text-danger">
@@ -133,3 +150,22 @@
     all the rest.</p>
 </div>
 {%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript">
+  $(function() {
+      var dtGeneticMarkers = buildDataTable(
+          "#tbl-genetic-markers",
+          JSON.parse($("#tbl-genetic-markers").attr("data-genetic-markers")),
+          [
+              {data: 'index'},
+              {data: 'Name'},
+              {data: 'Chr'},
+              {data: 'Mb'},
+              {data: 'Source'},
+              {data: 'Source2'}
+          ]);
+  })
+</script>
+{%endblock%}