From b4ba085d8761951c8220d67cd79fa6e8ff7107cb Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:31:18 +0000
Subject: Convert Correlation table to use create_datatable.js

---
 wqflask/wqflask/templates/correlation_page.html | 667 +++++++++++-------------
 1 file changed, 309 insertions(+), 358 deletions(-)

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index ceaa34b1..dbab2ffc 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -131,9 +131,6 @@
 {% endblock %}
 
 {% block js %}
-    <script type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
-    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
-
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
@@ -143,10 +140,13 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='fontawesome/js/all.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
     
 
     <script type="text/javascript" charset="utf-8">
-        var table_json = {{ table_json | safe }}
+        var tableJson = {{ table_json | safe }}
     </script>
 
     <script type="text/javascript" charset="utf-8">
@@ -223,370 +223,321 @@
         {% endif %}
 
         $(document).ready( function () {
-            table_conf = {
-                buttons: [
-                  {
-                    extend: 'csvHtml5',
-                    text: 'Download <span class="glyphicon glyphicon-download"></span>',
-                    className: 'btn btn-default',
-                    exportOptions: {
-                      columns: 'th:not(:first-child)'
-                    }
-                  }
-                ],
-                'drawCallback': function( settings ) {
-                      $('#trait_table tr').off().on("click", function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                        change_buttons()
-                      });
-                },
-                "data": table_json,
-                "columns": [
-                    {
-                      'data': null,
-                      'width': "25px",
-                      'orderDataType': "dom-checkbox",
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
-                      }
-                    },
-                    {
-                      'title': "Index",
-                      'type': "natural",
-                      'width': "30px",
-                      'data': "index"
-                    },
-                    {
-                      'title': "Record",
-                      'type': "natural-minus-na",
-                      'data': null,
-                      'width': "60px",
-                      'render': function(data, type, row, meta) {
-                        return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
-                      }
-                    }{% if target_dataset.type == 'ProbeSet' %},
-                    {
-                      'title': "Symbol",
-                      'type': "natural",
-                      'width': "120px",
-                      'data': "symbol"
-                    },
-                    {
-                      'title': "Description",
-                      'type': "natural",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-                        try {
-                          return decodeURIComponent(escape(data.description))
-                        } catch(err){
-                          return escape(data.description)
-                        }
-                      }
-                    },
-                    {
-                      'title': "Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "location"
-                    },
-                    {
-                      'title': "Mean",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "mean",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "lit_corr",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "tissue_corr",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "tissue_pvalue",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
-                      'type': "natural-minus-na",
-                      'data': "lod_score",
-                      'width': "60px",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "lrs_location"
-                    },
-                    {
-                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
-                      'type': "natural-minus-na",
-                      'data': "additive",
-                      'width': "85px",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% elif target_dataset.type == 'Publish' %},
-                    {
-                      'title': "Abbreviation",
-                      'type': "natural",
-                      'width': "200px",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.abbreviation_display))
-			                  } catch(err){
-			                    return data.abbreviation_display
-                        }
-                      }
-                    },
-                    {
-                      'title': "Description",
-                      'type': "natural",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.description))
-			                  } catch(err){
-			                    return data.description
-                        }
-                      }
-                    },
-                    {
-                      'title': "Mean",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "mean",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Authors",
-                      'type': "natural",
-                      'width': "400px",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.authors_display))
-			                  } catch(err){
-			                    return data.authors_display
-                        }
-                      }
-                    },
-                    {
-                      'title': "Year",
-                      'type': "natural-minus-na",
-                      'data': null,
-                      'width': "80px",
-                      'render': function(data, type, row, meta) {
-                        if (data.pubmed_id != "N/A"){
-                          return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
-                        } else {
-                          return data.pubmed_text
-                        }
-                      },
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
-                      'type': "natural-minus-na",
-                      'data': "lod_score",
-                      'width': "60px",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "lrs_location"
-                    },
-                    {
-                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
-                      'type': "natural-minus-na",
-                      'data': "additive",
-                      'width': "85px",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% elif target_dataset.type == 'Geno' %},
-                    {
-                      'title': "Location",
-                      'type': "natural-minus-na",
-                      'width': "120px",
-                      'data': "location"
-                    }, 
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% endif %}
-                ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
-                {% if target_dataset.type == 'Geno' %}
-                "order": [[6, "asc" ]],
-                {% elif target_dataset.type == 'Publish' %}
-                "order": [[10, "asc" ]],
-                {% else %}
-                "order": [[9, "asc" ]],
-                {% endif %}
-                "sDom": "itir",
-                "autoWidth": true,
-                "bSortClasses": false,
-                "scrollY": "100vh",
-                "scroller":  true,
-                "scrollCollapse": true
-            }
-
-            trait_table = $('#trait_table').DataTable(table_conf);
 
-            trait_table.buttons().container().appendTo('#export_options')
+          tableId = "trait_table";
 
-            $('.buttons-csv').removeClass('dt-button')
-
-            trait_table.on( 'order.dt search.dt draw.dt', function () {
-                trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-                cell.innerHTML = i+1;
-                } );
-            } ).draw();
-
-            $('.toggle-vis').on('click', function (e) {
-              e.preventDefault();
+          columnDefs = [
+            {
+              'data': null,
+              'width': "25px",
+              'orderDataType': "dom-checkbox",
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+              }
+            },
+            {
+              'title': "Index",
+              'type': "natural",
+              'width': "30px",
+              'data': "index"
+            },
+            {
+              'title': "Record",
+              'type': "natural-minus-na",
+              'data': null,
+              'width': "60px",
+              'render': function(data, type, row, meta) {
+                return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
+              }
+            }{% if target_dataset.type == 'ProbeSet' %},
+            {
+              'title': "Symbol",
+              'type': "natural",
+              'width': "120px",
+              'data': "symbol"
+            },
+            {
+              'title': "Description",
+              'type': "natural",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.description))
+                } catch(err){
+                  return escape(data.description)
+                }
+              }
+            },
+            {
+              'title': "Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "location"
+            },
+            {
+              'title': "Mean",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "mean",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "lit_corr",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "tissue_corr",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "tissue_pvalue",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
+              'type': "natural-minus-na",
+              'data': "lod_score",
+              'width': "60px",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "lrs_location"
+            },
+            {
+              'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+              'type': "natural-minus-na",
+              'data': "additive",
+              'width': "85px",
+              'orderSequence': [ "desc", "asc"]
+            }{% elif target_dataset.type == 'Publish' %},
+            {
+              'title': "Abbreviation",
+              'type': "natural",
+              'width': "200px",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.abbreviation_display))
+                } catch(err){
+                  return data.abbreviation_display
+                }
+              }
+            },
+            {
+              'title': "Description",
+              'type': "natural",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.description))
+                } catch(err){
+                  return data.description
+                }
+              }
+            },
+            {
+              'title': "Mean",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "mean",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Authors",
+              'type': "natural",
+              'width': "400px",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.authors_display))
+                } catch(err){
+                  return data.authors_display
+                }
+              }
+            },
+            {
+              'title': "Year",
+              'type': "natural-minus-na",
+              'data': null,
+              'width': "80px",
+              'render': function(data, type, row, meta) {
+                if (data.pubmed_id != "N/A"){
+                  return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+                } else {
+                  return data.pubmed_text
+                }
+              },
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
+              'type': "natural-minus-na",
+              'data': "lod_score",
+              'width': "60px",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "lrs_location"
+            },
+            {
+              'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+              'type': "natural-minus-na",
+              'data': "additive",
+              'width': "85px",
+              'orderSequence': [ "desc", "asc"]
+            }{% elif target_dataset.type == 'Geno' %},
+            {
+              'title': "Location",
+              'type': "natural-minus-na",
+              'width': "120px",
+              'data': "location"
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            }{% endif %}
+          ]
 
-              // Get the column API object
-              var column = trait_table.column( $(this).attr('data-column') );
+          tableSettings = {
+            "buttons": [
+              {
+                extend: 'csvHtml5',
+                text: 'Download <span class="glyphicon glyphicon-download"></span>',
+                className: 'btn btn-default',
+                exportOptions: {
+                  columns: 'th:not(:first-child)'
+                }
+              }
+            ],
+            {% if target_dataset.type == 'Geno' %}
+            "order": [[6, "asc" ]],
+            {% elif target_dataset.type == 'Publish' %}
+            "order": [[10, "asc" ]],
+            {% else %}
+            "order": [[9, "asc" ]],
+            {% endif %}
+          }
 
-              // Toggle the visibility
-              column.visible( ! column.visible() );
+          create_table(tableId, tableJson, columnDefs, tableSettings)
 
-              if (column.visible()){
-                $(this).removeClass("active");
-              } else {
-                $(this).addClass("active");
-              }
-            } );
+          trait_table = $('#trait_table').DataTable();
+          trait_table.buttons().container().appendTo('#export_options')
 
-            $('#redraw').on('click', function (e) {
-              e.preventDefault();
-              trait_table.columns().visible( true );
-              $('.toggle-vis.active').removeClass('active');
-            });
+          $('.buttons-csv').removeClass('dt-button')
 
-            submit_special = function(url) {
-                $("#correlation_form").attr("action", url);
-                return $("#correlation_form").submit();
-            };
+          submit_special = function(url) {
+              $("#correlation_form").attr("action", url);
+              return $("#correlation_form").submit();
+          };
 
-            $("#delete").on("click", function() {
-                url = $(this).data("url")
-                return submit_special(url)
-            });
+          $("#delete").on("click", function() {
+              url = $(this).data("url")
+              return submit_special(url)
+          });
 
-            $("#more_options").click(function() {
-                $("div#filter_options").toggle();
-            });
+          $("#more_options").click(function() {
+              $("div#filter_options").toggle();
+          });
 
-            $("#select_traits").click(function() {
-                console.log("redrawing")
-                trait_table.draw();
-            });
+          $("#select_traits").click(function() {
+              trait_table.draw();
+          });
         });
     </script>
 {% endblock %}
-- 
cgit v1.2.3