Changed gsearch_pheno template to use Scroller and also set column widths

1 files changed, 30 insertions, 28 deletions

diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index af9740ae..5f1465d7 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -48,6 +48,7 @@
 {% block js %}
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
     <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/scroller/js/dataTables.scroller.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='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colReorder/js/dataTables.colReorder.js') }}"></script>
@@ -66,6 +67,10 @@
       };
     </script>
 
+    <script type='text/javascript'>
+      var trait_list = {{ trait_list|safe }};
+    </script>
+
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
 
@@ -102,7 +107,6 @@
                 }
             }
 
-            console.time("Creating table");
             $('#trait_table').DataTable( {
                 'drawCallback': function( settings ) {
                      $('#trait_table tr').click(function(event) {
@@ -138,10 +142,12 @@
                     $('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': [
                     {
                       'data': null,
                       'orderDataType': "dom-checkbox",
+                      'width': "25px",
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                       }
@@ -149,23 +155,26 @@
                     {
                       'title': "Index",
                       'type': "natural",
+                      'width': "30px",
                       'data': "index"
                     },
                     {
                       'title': "Species",
                       'type': "natural",
+                      'width': "60px",
                       'data': "species"
                     },
                     {
                       'title': "Group",
                       'type': "natural",
-                      'width': "10%",
+                      'width': "100px",
                       'data': "group"
                     },
                     {
                       'title': "Record",
                       'type': "natural",
                       'data': null,
+                      'width': "60px",
                       'orderDataType': "dom-inner-text",
                       'render': function(data, type, row, meta) {
                         return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
@@ -174,7 +183,7 @@
                     {
                       'title': "Description",
                       'type': "natural",
-                      'width': "25%",
+                      'width': "500px",
                       'data': null,
                       'render': function(data, type, row, meta) {
 			                  try {
@@ -187,13 +196,13 @@
                     {
                       'title': "Mean",
                       'type': "natural-minus-na",
-                      'width': "10%",
+                      'width': "30px",
                       'data': "mean"
                     },
                     {
                       'title': "Authors",
                       'type': "natural",
-                      'width': "25%",
+                      'width': "300px",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         author_list = data.authors.split(",")
@@ -202,13 +211,7 @@
                         } else{
                           author_string = data.authors
                         }
-
-			                  try {
-                            return decodeURIComponent(escape(author_string))
-			                  } catch(err) {
-			                      return author_string
-                        }
-
+                        return author_string
                       }
                     },
                     {
@@ -216,6 +219,7 @@
                       'type': "natural-minus-na",
                       'data': null,
                       'orderDataType': "dom-inner-text",
+                      'width': "25px",
                       'render': function(data, type, row, meta) {
                         if (data.pubmed_id != "N/A"){
                           return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
@@ -229,35 +233,35 @@
                       'title': "Max LRS<a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                       'type': "natural-minus-na",
                       'data': "LRS_score_repr",
+                      'width': "60px",
                       'orderSequence': [ "desc", "asc"]
                     },
                     {
                       'title': "Max LRS Location",
                       'type': "natural-minus-na",
-                      'width': "10%",
+                      'width': "125px",
                       'data': "max_lrs_text"
                     },
                     {
                       'title': "Additive Effect<a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                       'type': "natural-minus-na",
                       'data': "additive",
+                      'width': "60px",
                       'orderSequence': [ "desc", "asc"]
                     }
                 ],
-                'order': [[1, "asc" ]],
-                'sDom': "pitirp",
-                'autoWidth': false,
-                'deferRender': false,
-                'paging': true,
-                'orderClasses': true,
+                "order": [[1, "asc" ]],
+                'sDom': "iti",
+                "autoWidth": true,
+                "bSortClasses": false,
                 'processing': true,
-                'iDisplayLength': 100,
-                'bServerSide': true,
-                'sAjaxSource': '/gsearch_table'+getParams(window.location.href),
-                'language': {
-                  'loadingRecords': '&nbsp;',
-                  'processing': 'Loading...'
-                }
+                {% if trait_count > 20 %}
+                "scrollY": "100vh",
+                "scroller":  true,
+                "scrollCollapse": true
+                {% else %}
+                "iDisplayLength": -1
+                {% endif %}
             } );
 
             $('#trait_table').append(
@@ -277,8 +281,6 @@
                 '</tr>' +
               '</tfoot>'
             );
-
-            console.timeEnd("Creating table");
         });
         
     </script>