From c03dded58477b48ce54a8a03da90aae45a256758 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 11 Mar 2021 22:43:35 +0000
Subject: Made a variety of changes to make column resizeability work - the
main issue was related to there being both an sWidth and width parameter
---
wqflask/wqflask/templates/search_result_page.html | 317 +++++++++++-----------
1 file changed, 166 insertions(+), 151 deletions(-)
(limited to 'wqflask')
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index a33d1b1a..210cef30 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -125,8 +125,8 @@
{% endif %}
{% endif %}
-
-
+
+
Loading...
@@ -175,161 +175,174 @@
var tableId = "trait_table";
columnDefs = [
- {
- 'data': null,
- 'width': "25px",
- 'orderDataType': "dom-checkbox",
- 'orderable': false,
- 'render': function(data, type, row, meta) {
- return ' '
- }
- },
- {
- 'title': "Index",
- 'type': "natural",
- 'width': "30px",
- 'data': "index"
- },
- {
- 'title': "Record",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "60px",
- 'render': function(data, type, row, meta) {
- return '' + data.display_name + ' '
+ {
+ 'data': null,
+ 'width': "25px",
+ 'orderDataType': "dom-checkbox",
+ 'orderable': false,
+ 'targets': 0,
+ 'render': function(data, type, row, meta) {
+ return ' '
+ }
+ },
+ {
+ 'title': "Index",
+ 'type': "natural",
+ 'width': "30px",
+ 'targets': 1,
+ 'data': "index"
+ },
+ {
+ 'title': "Record",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "60px",
+ 'targets': 2,
+ 'render': function(data, type, row, meta) {
+ return '' + data.display_name + ' '
+ }
+ }{% if dataset.type == 'ProbeSet' %},
+ {
+ 'title': "Symbol",
+ 'type': "natural",
+ 'width': "120px",
+ 'targets': 3,
+ 'data': "symbol"
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'data': null,
+ 'targets': 4,
+ 'render': function(data, type, row, meta) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return escape(data.description)
}
- }{% if dataset.type == 'ProbeSet' %},
- {
- 'title': "Symbol",
- 'type': "natural",
- 'width': "120px",
- 'data': "symbol"
- },
- {
- 'title': "Description",
- 'type': "natural",
- 'data': null,
- 'render': function(data, type, row, meta) {
- try {
+ }
+ },
+ {
+ 'title': "Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'targets': 5,
+ 'data': "location"
+ },
+ {
+ 'title': "Mean
",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'targets': 6,
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'targets': 7,
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'targets': 8,
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ 'type': "natural-minus-na",
+ 'data': "additive",
+ 'width': "60px",
+ 'targets': 9,
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Publish' %},
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'width': "500px",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ try {
return decodeURIComponent(escape(data.description))
- } catch(err){
- return escape(data.description)
- }
+ } catch(err){
+ return data.description
}
- },
- {
- 'title': "Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "location"
- },
- {
- 'title': "Mean
",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- 'type': "natural-minus-na",
- 'data': "additive",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Publish' %},
- {
- 'title': "Description",
- 'type': "natural",
- 'width': "500px",
- 'data': null,
- 'render': function(data, type, row, meta) {
- try {
- return decodeURIComponent(escape(data.description))
- } catch(err){
- return data.description
- }
+ }
+ },
+ {
+ 'title': "Mean
",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Authors",
+ 'type': "natural",
+ 'width': "300px",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ author_list = data.authors.split(",")
+ if (author_list.length >= 6) {
+ author_string = author_list.slice(0, 6).join(",") + ", et al."
+ } else{
+ author_string = data.authors
}
- },
- {
- 'title': "Mean
",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Authors",
- 'type': "natural",
- 'width': "300px",
- 'data': null,
- 'render': function(data, type, row, meta) {
- author_list = data.authors.split(",")
- if (author_list.length >= 6) {
- author_string = author_list.slice(0, 6).join(",") + ", et al."
- } else{
- author_string = data.authors
- }
- return author_string
+ return author_string
+ }
+ },
+ {
+ 'title': "Year
",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "25px",
+ 'render': function(data, type, row, meta) {
+ if (data.pubmed_id != "N/A"){
+ return '' + data.pubmed_text + ' '
+ } else {
+ return data.pubmed_text
}
},
- {
- 'title': "Year
",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "25px",
- 'render': function(data, type, row, meta) {
- if (data.pubmed_id != "N/A"){
- return '' + data.pubmed_text + ' '
- } else {
- return data.pubmed_text
- }
- },
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- 'type': "natural-minus-na",
- 'width': "60px",
- 'data': "additive",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Geno' %},
- {
- 'title': "Location
",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "location"
- }{% endif %}
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ 'type': "natural-minus-na",
+ 'width': "60px",
+ 'data': "additive",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Geno' %},
+ {
+ 'title': "Location
",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "location"
+ }{% endif %}
];
loadDataTable();
function loadDataTable(){
+
+ setUserColumnsDefWidths();
+
//ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
trait_table = $('#' + tableId).DataTable( {
'drawCallback': function( settings ) {
@@ -391,7 +404,8 @@
"deferRender": true,
"bSortClasses": false,
{% if trait_list|length > 20 %}
- "scrollY": "100vh",
+ "scrollY": "500px",
+ "scrollX": true,
"scroller": true,
"scrollCollapse": true,
{% else %}
@@ -411,6 +425,10 @@
} );
}
+ window.addEventListener('resize', function(){
+ trait_table.columns.adjust();
+ });
+
function setUserColumnsDefWidths() {
var userColumnDef;
@@ -430,12 +448,12 @@
// If there is, set the width of this columnDef in px
if ( userColumnDef ) {
+ columnDef.sWidth = userColumnDef.width + 'px';
columnDef.width = userColumnDef.width + 'px';
}
});
-
}
@@ -473,11 +491,8 @@
// Save (or update) the settings in localStorage
localStorage.setItem(tableId, JSON.stringify(userColumnDefs));
-
}
- //trait_table.draw(); //ZS: This makes the table adjust its height properly on initial load
-
$('.toggle-vis').on( 'click', function (e) {
e.preventDefault();
--
cgit v1.2.3