Merge pull request #502 from zsloan/bug/fix_correlation_export

Bug/fix correlation export

1 files changed, 18 insertions, 15 deletions

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index aa74abf5..5093ebfa 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -80,19 +80,21 @@
                 <input type="hidden" name="database_name" id="database_name" value="None">
                 <input type="hidden" name="export_data" id="export_data" value="">
                 <input type="hidden" name="file_name" id="file_name" value="{{ this_trait.name }}_{{ dataset.name }}_correlation">
-                <button class="btn btn-default" id="export_traits">Download CSV</button>
                 <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search Table For ...">
                 <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
                 <button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button>
                 <button id="redraw" class="btn btn-default" type="button">Reset Columns</button>
             </form>
             <br />
+            <div id="export_options"></div>
             {% if target_dataset.type != "Publish" %}
             <br />
-            <button id="more_options" class="btn btn-primary">More Options...</button>
+            <div style="float: left; clear: left;">
+              <button id="more_options" class="btn btn-primary">More Options...</button>
+            </div>
             <br />
             <br />
-            <div id="filter_options" style="display: none;">
+            <div id="filter_options" style="display: none; float: left; clear: left;">
             <span style="border: 1px dashed #999999; padding: 8px; background-color: #ddf; font-size: 12px;">
                 <button id="select_traits" class="btn btn-primary" style="font-size: 12px; padding: 2px 3px;">Select Traits</button> with r >
                 <input type="text" name="r_greater_select" value="-1.0" size="6" maxlength="10">
@@ -115,7 +117,7 @@
             </div>
             {% endif %}
         </div>
-        <div class="show-hide-container">
+        <div class="show-hide-container" style="float: left; clear: left;">
           <b>Show/Hide Columns:</b>
           <br>
           <button class="toggle-vis" data-column="1">Index</button>
@@ -174,7 +176,7 @@
 
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
-    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.html5.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
@@ -259,17 +261,14 @@
         $(document).ready( function () {
             table_conf = {
                 buttons: [
-                    {
-                        extend: 'columnsToggle',
-                        columns: function( idx, data, node ) {
-                          if (idx != 0) {
-                            return true;
-                          } else {
-                            return false;
-                          }
-                        },
-                        postfixButtons: [ 'colvisRestore' ]
+                  {
+                    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) {
@@ -544,6 +543,10 @@
 
             trait_table = $('#trait_table').DataTable(table_conf);
 
+            trait_table.buttons().container().appendTo('#export_options')
+
+            $('.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;