Fixed the code that generates the dataset selection drop-down for correlations

Made changes to the tables of correlation results, collections, and search results:
- Added resizeable columns to correlation results and collections, but not to search results
because it seems that it requires Y scrolling to be set (I'll check if it makes sense to add scrolling
to the search results)
- Correlation results and collections are now in scrolling tables
- The style is the same across all of these tables now

Remaining issues:
- It doesn't seem like I can set the column width when initializing dataTables in
correlation results. I don't know why this is; it might be due to the table already being the size
of a full page. I want to be able to default to some good widths, even if the user can resize them
- I tried adding hoverForMore, but it doesn't seem to cooperate with datatable cells; I think this is
due to having to put the text in a div.

4 files changed, 324 insertions, 130 deletions

diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index f14c0921..9c3cc843 100755
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -1,5 +1,12 @@
 {% extends "base.html" %}
 {% block title %}Your Collections{% endblock %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
+{% endblock %}
 {% block content %}
 <!-- Start of body -->
     {{ header("Your Collections",
@@ -11,8 +18,8 @@
             <h1>Collections owned by {{ g.user_session.user_ob.full_name }}</h1>
         </div>
 
-        <div class="bs-docs-example" id="collections_list">
-        <table class="table table-hover" id='trait_table'>
+        <div id="collections_list">
+        <table class="table table-hover table-striped" id='trait_table'>
             <thead>
                 <tr>
                     <th>Index</th>
@@ -49,7 +56,33 @@
 
 {% block js %}
     <script type="text/javascript" src="/static/packages/smart-time-ago/lib/timeago.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
     <script>
-        $('body').timeago();
+            $('#trait_table').dataTable( {
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
+            } );
+
+            var table = $('#trait_table').DataTable();
+            new $.fn.dataTable.FixedHeader( table );
+            new $.fn.dataTable.FixedColumns( table );
+
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 053861ae..49df6af5 100755
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -4,6 +4,8 @@
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
@@ -102,7 +104,7 @@
                     <TD>{{ this_trait.additive }}</TD>
 
                 </TR>
-            {% endfor %}
+                {% endfor %}
             </tbody>
 
         </table>
@@ -118,8 +120,13 @@
     <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
+
+
     <script language="javascript" type="text/javascript">
         $(document).ready( function () {
 
@@ -131,36 +138,39 @@
 
             console.time("Creating table");
             $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": false },
-                    { "sType": "natural" },
-                    { "sType": "natural",
-                      "sWidth": "35%"  },
-                    { "sType": "natural",
-                      "sWidth": "15%"  },
-                    { "sType": "cust-txt" },
-                    { "sType": "natural",
-                      "sWidth": "12%"  },
-                    { "sType": "natural",
-                      "sWidth": "15%"  },
-                    { "sType": "cust-txt" }
-                ],
                 "columns": [
-                    { "width": "50%" },
-                    null,
-                    null,
-                    null,
-                    null,
-                    null
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural",
+                      "width": "35%"  },
+                    { "type": "natural",
+                      "width": "15%"  },
+                    { "type": "cust-txt" },
+                    { "type": "natural",
+                      "width": "12%"  },
+                    { "type": "natural",
+                      "width": "15%"  },
+                    { "type": "natural" }
                 ],
-                "sDom": "tir",
+                "sDom": "Ztir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
-                "bSortClasses": false
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
             } );
             console.timeEnd("Creating table");
+
+            var table = $('#trait_table').DataTable();
+            new $.fn.dataTable.FixedColumns( table );
+
         });
         
     </script>
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 445ad428..b60b4ea9 100755
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -3,6 +3,8 @@
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" rel="stylesheet">
+    <link href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css" rel="stylesheet">
 {% endblock %}
 {% block content %}
     
@@ -21,17 +23,19 @@
         </p>    
 
         <div>
-            <table id="corr_results" class="table table-hover table-striped table-bordered">
+            <table id="corr_results" class="table table-hover table-striped">
                 <thead>
                     <tr>
-                    {% if target_dataset.type == 'ProbeSet' %}
-                        <th>Trait</th>
-                        <th>Symbol</th>
-                        <th>Description</th>
-                        <th>Location</th>
-                        <th>Mean Expr</th>
-                        <th>Max LRS</th>
-                        <th>Max LRS Location</th>
+                    {% for header in target_dataset.header_fields %}
+                        {% if header == 'Max LRS' %}
+                        <th style="text-align: right;">Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        {% elif header == 'Additive Effect' %}
+                        <th style="text-align: right;">Additive<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        {% else %}
+                        <th>{{header}}</th>
+                        {% endif %}
+                    {% endfor %}
+                        {% if target_dataset.type == "ProbeSet" %}
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -48,10 +52,6 @@
                         <th>Tissue p(rho)</th>
                         {% endif %}
                     {% elif target_dataset.type == "Publish" %}
-                        <th>Record ID</th>
-                        <th>Phenotype</th>
-                        <th>Authors</th>
-                        <th>Year</th>
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -62,8 +62,6 @@
                         <th>Sample p(rho)</th>
                         {% endif %}
                     {% elif target_dataset.type == "Geno" %}
-                        <th>Record ID</th>
-                        <th>Location</th>
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -76,54 +74,64 @@
                     {% endif %}
                     </tr>
                 </thead>
+
                 <tbody>
                 {% for trait in correlation_results %}
                     <tr>
-                    {% if target_dataset.type == 'ProbeSet' %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>{{ trait.symbol }}</td>
-                        <td>{{ trait.description }} <br><br> <b>Aliases</b>: {{ trait.alias }}</td>
-                        <td>Chr{{ trait.chr }}: {{'%0.6f'|format(trait.mb) if trait.mb != None }}</td>
-                        <td>{{'%0.3f'|format(trait.mean)}}</td>
-                        {% if trait.lrs == "" or trait.lrs == 0.000 %}
-                        <td>--</td>
-                        {% else %}
-                        <td>{{'%0.3f'|format(trait.lrs)}}</td>
-                        {% endif %}
-                        {% if trait.locus_mb == "" %}
-                        <td>--</td>
-                        {% else %}
-                        <td>Chr{{ trait.locus_chr if trait.locus_chr != None }}: {{'%0.3f'|format(trait.locus_mb)}}</td>
-                        {% endif %}
-                        <td><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
-                        <td>{{ trait.num_overlap }}</td>
-                        <td>{{'%0.3e'|format(trait.sample_p)}}</td>
+                        <TD>{{ loop.index }}
+                            <INPUT TYPE="checkbox" NAME="result_trait" class="checkbox trait_checkbox"
+                                   VALUE="{{ data_hmac('{}:{}'.format(trait.name, target_dataset.name)) }}">
+                        </TD>
+                        <TD>
+                            <a href="{{ url_for('show_trait_page',
+                                    trait_id = trait.name,
+                                    dataset = dataset.name
+                                    )}}">
+                                {{ trait.name }}
+                            </a>
+                        </TD>
+                      {% if target_dataset.type == 'ProbeSet' %}
+                        <TD>{{ trait.symbol }}</TD>
+                        <TD>{{ trait.description_display }}</TD>
+                        <TD style="white-space: nowrap;">{{ trait.location_repr }}</TD>
+                        <TD align="right">{{ '%0.3f' % trait.mean|float }}</TD>
+                        <TD align="right">{{ '%0.3f' % trait.LRS_score_repr|float }}</TD>
+                        <TD style="white-space: nowrap;">{{ trait.LRS_location_repr }}</TD>
+                        <TD align="right">{{ '%0.3f' % trait.additive|float }}</TD>
+                        <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
+                        <TD>{{ trait.num_overlap }}</TD>
+                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
                         {% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
-                        <td>--</td>
+                        <TD>--</TD>
                         {% else %}
-                        <td>{{'%0.3f'|format(trait.lit_corr)}}</td>
+                        <TD>{{'%0.3f'|format(trait.lit_corr)}}</TD>
                         {% endif %}
                         {% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
-                        <td>--</td>
+                        <TD>--</TD>
                         {% else %}
-                        <td>{{'%0.3f'|format(trait.tissue_corr)}}</td>
+                        <TD>{{'%0.3f'|format(trait.tissue_corr)}}</TD>
                         {% endif %}
-                        <td>{{'%0.3e'|format(trait.tissue_pvalue)}}</td>
-                    {% elif target_dataset.type == "Publish" %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>{{ trait.post_publication_description }}</td>
-                        <td>{{ trait.authors }}</td>
-                        <td>{{ trait.year }}</td>
-                        <td><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
-                        <td>{{ trait.num_overlap }}</td>
-                        <td>{{'%0.3e'|format(trait.sample_p)}}</td>
-                    {% elif target_dataset.type == "Geno" %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>Chr{{ trait.chr }}: {{'%0.6f'|format(trait.mb) }}</td>
-                        <td><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
-                        <td>{{ trait.num_overlap }}</td>
-                        <td>{{'%0.3e'|format(trait.sample_p)}}</td>
-                    {% endif %}
+                        <TD>{{'%0.3e'|format(trait.tissue_pvalue)}}</TD>
+                      {% elif target_dataset.type == "Publish" %}
+                        <TD>{{ trait.description_display }}</TD>
+                        <TD>{{ trait.authors }}</TD>
+                        <TD>
+                            <a href="{{ trait.pubmed_link }}">
+                                {{ trait.pubmed_text }}
+                            </a>
+                        </TD>
+                        <TD>{{ trait.LRS_score_repr }}</TD>
+                        <TD>{{ trait.LRS_location_repr }}</TD>
+                        <TD>{{ '%0.3f' % trait.additive|float }}</TD>
+                        <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
+                        <TD>{{ trait.num_overlap }}</TD>
+                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+                      {% elif target_dataset.type == "Geno" %}
+                        <TD>{{ trait.location_repr }}</TD>
+                        <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
+                        <TD>{{ trait.num_overlap }}</TD>
+                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+                      {% endif %}
                     </tr>
                 {% endfor %}
                 </tbody>
@@ -133,35 +141,168 @@
 {% endblock %}
 
 {% block js %}  
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
     <script type="text/javascript" charset="utf-8">
+        function getValue(x) {
+            if (x.indexOf('input') >= 0) {
+                if ($(x).val() == 'x') {
+                    return 0;
+                }
+                else {
+                   return parseFloat($(x).val());
+                }
+            }
+            else if (isNaN(x)) {
+                return x;
+            }
+            return parseFloat(x);
+        }
+            
+        jQuery.fn.dataTableExt.oSort['numeric-html-asc']  = function(a,b) {
+            a = Math.abs(parseFloat($(a).text()));
+            b = Math.abs(parseFloat($(b).text()));
+            return ((a < b) ? -1 : ((a > b) ?  1 : 0));
+        };
+
+        jQuery.fn.dataTableExt.oSort['numeric-html-desc']  = function(a,b) {
+            a = Math.abs(parseFloat($(a).text()));
+            b = Math.abs(parseFloat($(b).text()));
+            return ((a < b) ? 1 : ((a > b) ?  -1 : 0));
+        };
+
+        jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
+            var x = getValue(a);
+            var y = getValue(b); 
+            
+            if (x == 'N/A' || x == '') {
+                return 1;
+            }
+            else if (y == 'N/A' || y == '') {
+                return -1;
+            }
+            else {
+                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+            }
+        };
+            
+        jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) {
+            var x = getValue(a);
+            var y = getValue(b);
+            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
+        };
+
+
         $(document).ready( function () {
+            
+            $('#corr_results tr').click(function(event) {
+                if (event.target.type !== 'checkbox') {
+                    $(':checkbox', this).trigger('click');
+                }
+            });
+
             console.time("Creating table");
+
+            {% if target_dataset.type == "ProbeSet" %}
             $('#corr_results').dataTable( {
-                //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
-                "sDom": "lTftipr",
-                "oTableTools": {
-                    "aButtons": [
-                        "copy",
-                        "print",
-                        {
-                            "sExtends":    "collection",
-                            "sButtonText": 'Save <span class="caret" />',
-                            "aButtons":    [ "csv", "xls", "pdf" ]
-                        }
-                    ],
-                    "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
+            } );
+            {% elif target_dataset.type == "Publish" %}
+            $('#corr_results').dataTable( {
+                "aoColumns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
                 },
-                "iDisplayLength": 50,
+                "paging": false
+            } );
+            {% elif target_dataset.type == "Geno" %}
+            $('#corr_results').dataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
-                "bSortClasses": false
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
             } );
+            {% endif %}
             console.timeEnd("Creating table");
+
+            var table = $('#corr_results').DataTable();
+            //new $.fn.dataTable.FixedHeader( table );
+            new $.fn.dataTable.FixedColumns( table );
+
+
         });
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index cc1a6a88..1ae2a25a 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -4,6 +4,8 @@
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
@@ -45,7 +47,7 @@
             <button class="btn btn-primary"><span class="glyphicon glyphicon-download"></span> Download Table</button>
             <br />
             <br />
-            <table class="table table-hover table-striped" id='trait_table'>
+            <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %} width="400px" style="float: left;"{% endif %}>
                 <thead>
                     <tr>
                     {% for header in header_fields %}
@@ -116,13 +118,12 @@
     
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
-	
-    <link href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" rel="stylesheet">
-    <link href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css" rel="stylesheet">
-    <script src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
-    <script src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
+    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
+
 	
     <script type="text/javascript" charset="utf-8">
         function getValue(x) {
@@ -173,49 +174,58 @@
             console.time("Creating table");
             {% if dataset.type == 'ProbeSet' %}
             $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": true, "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "35%"},
-                    { "sType": "natural", "sWidth": "15%"},
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "8%"},
-                    { "sType": "natural", "sWidth": "15%"},
-                    { "sType": "natural", "sWidth": "7%"}
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "35%"},
+                    { "type": "natural", "width": "15%"},
+                    { "type": "natural" },
+                    { "type": "natural", "width": "8%"},
+                    { "type": "natural", "width": "15%"},
+                    { "type": "natural", "width": "7%"}
                 ],
-                "sDom": "tir",
+                "sDom": "Ztir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
                 "bSortClasses": false,
-                "scrollY": "300px",
-                "scrollX": "100%",
-                "scrollCollapse": true,
                 "paging": false
             } );
             {% elif dataset.type == 'Publish' %}
             $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": true, "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "35%"  },
-                    { "sType": "natural", "sWidth": "20%"  },
-                    { "sType": "natural" },
-                    { "sType": "cust-txt" },
-                    { "sType": "natural" },
-                    { "sType": "cust-txt" }
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "15%"},
+                    { "type": "natural" }
+                ],
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "paging": false
+            } );
+            {% elif dataset.type == 'Geno' %}
+            $('#trait_table').dataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "40%"}
                 ],
-                "sDom": "tir",
+                "sDom": "Ztir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
                 "bSortClasses": false,
-                "scrollY": "300px",
-                "scrollX": "100%",
-                "scrollCollapse": true,
                 "paging": false
             } );
             {% endif %}