Changed the Hide No Value function to use DataTables API

2 files changed, 28 insertions, 7 deletions

diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 87c35984..e8768325 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -731,14 +731,35 @@ filter_by_value = function() {
   }
 };
 
+hide_no_value_filter = function( settings, data, dataIndex ) {
+  this_value = table_api.column(3).nodes().to$()[dataIndex].childNodes[0].value;
+  if (this_value == "x"){
+    return false
+  } else {
+    return true
+  }
+}
+
 hide_no_value = function() {
-  return $('.value_se').each((function(_this) {
-    return function(_index, element) {
-      if ($(element).find('.trait-value-input').val() === 'x') {
-        return $(element).hide();
+
+  tables = ['samples_primary', 'samples_other'];
+  filter_active = $(this).data("active");
+  for (_i = 0, _len = tables.length; _i < _len; _i++) {
+    table = tables[_i];
+    if ($('#' + table).length) {
+      table_api = $('#' + table).DataTable();
+      if (filter_active == "true"){
+        table_api.draw();
+        $(this).data("active", "false");
+      } else {
+        $.fn.dataTable.ext.search.push(hide_no_value_filter);
+        table_api.search();
+        table_api.draw();
+        $.fn.dataTable.ext.search.splice($.fn.dataTable.ext.search.indexOf(hide_no_value_filter, 1));
+        $(this).data("active", "true");
       }
-    };
-  })(this));
+    }
+  }
 };
 $('#hide_no_value').click(hide_no_value);
 
diff --git a/wqflask/wqflask/templates/show_trait_transform_and_filter.html b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
index d7eac378..b70ca590 100644
--- a/wqflask/wqflask/templates/show_trait_transform_and_filter.html
+++ b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
@@ -80,7 +80,7 @@
       <input type="button" id="filter_by_value" class="btn btn-danger" value="Filter">
     </div>
     <div>
-      <input type="button" id="hide_no_value" class="btn btn-default" value="Hide No Value">
+      <input data-active="false" type="button" id="hide_no_value" class="btn btn-default" value="Hide No Value">
       <input type="button" id="block_outliers" class="btn btn-default" value="Block Outliers">
       <input type="button" class="btn btn-success reset" value="Reset">
       <span class="input-append">