Merge pull request #543 from zsloan/feature/add_scroller_to_search_results

Feature/add scroller to search results

1 files changed, 10 insertions, 31 deletions

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 411a6628..b8f89121 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -3,7 +3,6 @@
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='fontawesome/css/font-awesome.min.css') }}" />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/scrollerStyle/css/scroller.dataTables.min.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
@@ -125,7 +124,7 @@
             {% endif %}
           </div>
           {% endif %}
-          <div id="table_container" {% if dataset.type == 'ProbeSet' or dataset.type == 'Publish' %}style="min-width: 1500px;"{% endif %}>
+          <div id="table_container" {% if dataset.type == 'ProbeSet' or dataset.type == 'Publish' %}style="min-width: 1500px; max-width:100%;"{% endif %}>
             <table class="table-hover table-striped cell-border" id='trait_table' style="float: left; width: {% if dataset.type == 'Geno' %}380px{% else %}100%{% endif %};">
                 <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -146,6 +145,7 @@
     <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="https://cdn.datatables.net/scroller/2.0.2/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/buttons/js/dataTables.buttons.min.js') }}"></script>
@@ -309,7 +309,6 @@
                     {
                       'title': "Description",
                       'type': "natural",
-                      'width': "500px",
                       'data': null,
                       'render': function(data, type, row, meta) {
 			                  try {
@@ -383,36 +382,16 @@
                     }{% endif %}
                 ],
                 "order": [[1, "asc" ]],
-                {% if dataset.type != 'Geno' %}
-                buttons: [
-                    {
-                        extend: 'columnsToggle',
-                        columns: function( idx, data, node ) {
-                          if (idx != 0) {
-                            return true;
-                          } else {
-                            return false;
-                          }
-                        },
-                        postfixButtons: [ 'colvisRestore' ]
-                    }
-                ],
-                'sDom': "Bpitirp",
-                {% else %}
-                'sDom': "pitirp",
-                {% endif %}
-                'iDisplayLength': 500,
-                'deferRender': true,
-                'paging': true,
-                'orderClasses': true,
-                'processing': true,
-                'bServerSide': true,
-                'sAjaxSource': '/search_table'+getParams(window.location.href),
-                'infoCallback': function(settings, start, end, max, total, pre) {
-                  return "Showing " + start + " to " + (start + this.api().data().length - 1) + " of " + total + " entries";
-                }
+                'sDom': "itir",
+                "autoWidth": true,
+                "bSortClasses": false,
+                "scrollY": "100vh",
+                "scroller":  true,
+                "scrollCollapse": true
             } );
             
+            trait_table.draw(); //ZS: This makes the table adjust its height properly on initial load
+
             $('.toggle-vis').on( 'click', function (e) {
               e.preventDefault();