Convert phenotype global search to use create_datatable.js

1 files changed, 9 insertions, 77 deletions

diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 7abdb222..8824ce55 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -56,6 +56,7 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type='text/javascript'>
       var getParams = function(url) {
@@ -70,15 +71,13 @@
     </script>
 
     <script type='text/javascript'>
-      var trait_list = {{ trait_list|safe }};
+      var traitsJson = {{ trait_list|safe }};
     </script>
 
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
           var tableId = "trait_table";
 
-          var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
-
           columnDefs = [
             {
               'data': null,
@@ -199,30 +198,8 @@
             }
           ]
 
-          loadDataTable(true);
-
-          function loadDataTable(first_run=false){
-
-            if (!first_run){
-              setUserColumnsDefWidths(tableId);
-            }
-
-            table_settings = {
-              'drawCallback': function( settings ) {
-                $('#' + tableId + ' 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()
-                });
-              },
-              "createdRow": function ( row, data, index ) {
+          tableSettings = {
+            "createdRow": function ( row, data, index ) {
                 $('td', row).eq(0).attr("style", "text-align: center; padding: 4px 10px 2px 10px;");
                 $('td', row).eq(1).attr("align", "right");
                 $('td', row).eq(5).attr('title', $('td', row).eq(5).text());
@@ -248,60 +225,15 @@
                 $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
                 $('td', row).eq(10).attr('data-export', $('td', row).eq(10).text());
               },
-              'data': trait_list,
-              'columns': columnDefs,
-              "order": [[1, "asc" ]],
-              'sDom': "iti",
-              "destroy": true,
-              "deferRender": true,
-              "bSortClasses": false,
-              {% if trait_count > 20 %}
-              "scrollY": "100vh",
-              "scroller":  true,
-              "scrollCollapse": true,
+              {% if trait_count <= 20 %}
+              "scroller":  false
               {% else %}
-              "iDisplayLength": -1,
+              "scroller": true
               {% endif %}
-              "initComplete": function (settings) {
-                //Add JQueryUI resizable functionality to each th in the ScrollHead table
-                $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
-                  handles: "e",
-                  alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
-                  resize: function( event, ui ) {
-                    width_change = ui.size.width - ui.originalSize.width;
-                  },
-                  stop: function () {
-                    saveColumnSettings(tableId, trait_table);
-                    loadDataTable();
-                  }
-                });
-              }
-            }
+          }
 
-            if (!first_run){
-                table_settings['autoWidth'] = false;
-                $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
-              }
-
-              let checked_rows = get_checked_rows(tableId);
-              trait_table = $('#' + tableId).DataTable(table_settings);
-              if (checked_rows.length > 0){
-                recheck_rows(trait_table, checked_rows);
-              }
-
-              if (first_run){
-                  {% if trait_list|length > 20 %}
-                  $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
-                  {% endif %}
-              }
-
-              trait_table.draw();
-            }
+          create_table(tableId, traitsJson, columnDefs, tableSettings);
 
-            $('#redraw').click(function() {
-                var table = $('#' + tableId).DataTable();
-                table.colReorder.reset()
-            });
         });
     </script>
 {% endblock %}