Added option to search through sample table on trait page

2 files changed, 28 insertions, 13 deletions

diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 3e4a6d7c..f6121d7b 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -225,7 +225,7 @@
                 {% endif %}
                 {% endif %}
 
-                $('#samples_primary').DataTable( {
+                var primary_table = $('#samples_primary').DataTable( {
                   'initComplete': function(settings, json) {
                     $('.edit_sample_value').change(function() {
                       edit_data_change();
@@ -268,6 +268,7 @@
                     {
                       'data': null,
                       'orderDataType': "dom-checkbox",
+                      'searchable' : false,
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
                       }
@@ -275,7 +276,8 @@
                     {
                       'title': "ID",
                       'type': "natural",
-                      'data': "this_id"
+                      'data': "this_id",
+                      'searchable' : false
                     },
                     {
                       'title': "Sample",
@@ -302,6 +304,7 @@
                       'bSortable': false,
                       'type': "natural",
                       'data': null,
+                      'searchable' : false,
                       'render': function(data, type, row, meta) {
                         return '±'
                       }
@@ -356,8 +359,12 @@
                   }
                 } );
 
+                $('#primary_searchbox').on( 'keyup', function () {
+                  primary_table.search($(this).val()).draw();
+                } );
+
                 {% if sample_groups|length != 1 %}
-                $('#samples_other').DataTable( {
+                var other_table = $('#samples_other').DataTable( {
                   'initComplete': function(settings, json) {
                     $('.edit_sample_value').change(function() {
                       edit_data_change();
@@ -400,6 +407,7 @@
                     {
                       'data': null,
                       'orderDataType': "dom-checkbox",
+                      'searchable' : false,
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
                       }
@@ -407,7 +415,8 @@
                     {
                       'title': "ID",
                       'type': "natural",
-                      'data': "this_id"
+                      'data': "this_id",
+                      'searchable' : false
                     },
                     {
                       'title': "Sample",
@@ -434,6 +443,7 @@
                       'bSortable': false,
                       'type': "natural",
                       'data': null,
+                      'searchable' : false,
                       'render': function(data, type, row, meta) {
                         return '±'
                       }
@@ -487,6 +497,10 @@
                     'processing': 'Loading...'
                   }
                 } );
+
+                $('#other_searchbox').on( 'keyup', function () {
+                  other_table.search($(this).val()).draw();
+                } );
                 {% endif %}
 
                 $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'orange')
diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html
index fec141dc..e342a3f8 100644
--- a/wqflask/wqflask/templates/show_trait_edit_data.html
+++ b/wqflask/wqflask/templates/show_trait_edit_data.html
@@ -13,15 +13,16 @@
     {% for sample_type in sample_groups %}
         {% set outer_loop = loop %}
         <div class="sample_group" style="width:{{ trait_table_width }};">
-            <h3>{{ sample_type.header }}<span name="transform_text"></span></h3>
-            <hr style="margin-top: 4px; margin-bottom: 10px; height: 1px; background-color: #A9A9A9;">
-            <div id="table_container">
-            <table class="table-hover table-striped cell-border" id="samples_{{ sample_type.sample_group_type }}" style="float: left; width:100%;">
-                <tbody>
-                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
-                </tbody>
-            </table>
-            </div>
+          <div style="position: relative;">
+            <div style="display: inline;"><h3 style="float: left;">{{ sample_type.header }}<span name="transform_text"></span></h3><input type="text" id="{{ sample_type.sample_group_type }}_searchbox" class="form-control" style="width: 200px; display: inline; float: right; vertical-align: top;" placeholder="Search This Table For ..."></div>
+          </div>
+          <div id="table_container">
+          <table class="table-hover table-striped cell-border" id="samples_{{ sample_type.sample_group_type }}" style="float: left; width:100%;">
+              <tbody>
+                <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
+              </tbody>
+          </table>
+          </div>
         </div>
         <br>
         {% endfor %}