aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2021-04-19 21:15:14 +0000
committerzsloan2021-06-18 19:31:27 +0000
commitd1beaa5ac7a3eea343d8447d771f7661173fabac (patch)
tree56fe9c9d23dc2cbfae92ee0ce9e5ff7f0efafa0e
parent62667ad7bd1a9a9fb555a87c873d7a54ab7f03f9 (diff)
downloadgenenetwork2-d1beaa5ac7a3eea343d8447d771f7661173fabac.tar.gz
Fixed resizeable columns to work with show/hide columns option + keep rows checked after resizing
-rw-r--r--wqflask/wqflask/templates/search_result_page.html79
1 files changed, 70 insertions, 9 deletions
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index c165ad3c..eac3ec61 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -224,9 +224,6 @@
'title': "Description",
'type': "natural",
'data': null,
- {% if wide_columns_exist == true %}
- 'width': "600px",
- {% endif %}
'targets': 4,
'render': function(data, type, row, meta) {
try {
@@ -260,7 +257,8 @@
'type': "natural-minus-na",
'data': "lod_score",
{% if wide_columns_exist == true %}
- 'width': "60px", {% endif %}
+ 'width': "60px",
+ {% endif %}
'targets': 7,
'orderSequence': [ "desc", "asc"]
},
@@ -299,6 +297,7 @@
'title': "Description",
'type': "natural",
'data': null,
+ 'targets': 3,
'render': function(data, type, row, meta) {
try {
return decodeURIComponent(escape(data.description))
@@ -310,8 +309,11 @@
{
'title': "<div style='text-align: right;'>Mean</div>",
'type': "natural-minus-na",
+ {% if wide_columns_exist == true %}
'width': "60px",
+ {% endif %}
'data': "mean",
+ 'targets': 4,
'orderSequence': [ "desc", "asc"]
},
{
@@ -321,6 +323,7 @@
'width': "400px",
{% endif %}
'data': null,
+ 'targets': 5,
'render': function(data, type, row, meta) {
author_list = data.authors.split(",")
if (author_list.length >= 6) {
@@ -335,7 +338,10 @@
'title': "<div style='text-align: right;'>Year</div>",
'type': "natural-minus-na",
'data': null,
+ {% if wide_columns_exist == true %}
'width': "50px",
+ {% endif %}
+ 'targets': 6,
'render': function(data, type, row, meta) {
if (data.pubmed_id != "N/A"){
return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
@@ -349,30 +355,70 @@
'title': "<div style='text-align: right;'>Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>LOD&ensp;&emsp;</div>",
'type': "natural-minus-na",
'data': "lod_score",
+ 'targets': 7,
+ {% if wide_columns_exist == true %}
'width': "60px",
+ {% endif %}
'orderSequence': [ "desc", "asc"]
},
{
'title': "<div style='text-align: right;'>Peak Location</div>",
'type': "natural-minus-na",
+ {% if wide_columns_exist == true %}
'width': "120px",
+ {% endif %}
+ 'targets': 8,
'data': "lrs_location"
},
{
'title': "<div style='text-align: right;'>Effect <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>Size&ensp;&emsp;</div>",
'type': "natural-minus-na",
+ {% if wide_columns_exist == true %}
'width': "60px",
+ {% endif %}
'data': "additive",
+ 'targets': 9,
'orderSequence': [ "desc", "asc"]
}{% elif dataset.type == 'Geno' %},
{
'title': "<div style='text-align: right;'>Location</div>",
'type': "natural-minus-na",
+ {% if wide_columns_exist == true %}
'width': "120px",
+ {% endif %}
+ 'targets': 2,
'data': "location"
}{% endif %}
];
+ recheck_rows = function(checked_rows){
+ //ZS: This is meant to recheck checkboxes after columns are resized
+ check_cells = trait_table.column(0).nodes().to$();
+ for (let i = 0; i < check_cells.length; i++) {
+ if (checked_rows.includes(i)){
+ check_cells[i].childNodes[0].checked = true;
+ }
+ }
+
+ check_rows = trait_table.rows().nodes();
+ for (let i =0; i < check_rows.length; i++) {
+ if (checked_rows.includes(i)){
+ check_rows[i].classList.add("selected")
+ }
+ }
+ }
+
+ get_checked_rows = function(trait_table){
+ let checked_rows = []
+ $("#trait_table input").each(function(index){
+ if ($(this).prop("checked") == true){
+ checked_rows.push(index);
+ }
+ });
+
+ return checked_rows
+ }
+
loadDataTable(true);
function loadDataTable(first_run=false){
@@ -473,13 +519,22 @@
table_settings['autoWidth'] = false;
$('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "px"); //ZS : 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();
trait_table = $('#' + tableId).DataTable(table_settings);
+ if (checked_rows.length > 0){
+ recheck_rows(checked_rows);
+ }
- {% if trait_list|length > 20 %}
if (first_run){
+ {% if trait_list|length > 20 %}
$('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
+ {% else %}
+ {% if wide_columns_exist != true %}
+ $('#table_container').css("width", String($('#trait_table').width()) + "px");
+ {% endif %}
+ {% endif %}
}
- {% endif %}
}
window.addEventListener('resize', function(){
@@ -507,8 +562,16 @@
columnDef.sWidth = userColumnDef.width + 'px';
columnDef.width = userColumnDef.width + 'px';
+ $('.toggle-vis').each(function(){
+ if ($(this).attr('data-column') == columnDef.targets){
+ if ($(this).hasClass("active")){
+ columnDef.bVisible = false
+ } else {
+ columnDef.bVisible = true
+ }
+ }
+ })
}
-
});
}
@@ -527,10 +590,8 @@
width = $(header).width();
if ( existingSetting !== -1 ) {
-
// Update the width
userColumnDefs[existingSetting].width = width;
-
} else {
// Add the width for this column