diff options
| -rw-r--r-- | wqflask/wqflask/templates/test_correlation_page.html | 72 |
1 files changed, 40 insertions, 32 deletions
diff --git a/wqflask/wqflask/templates/test_correlation_page.html b/wqflask/wqflask/templates/test_correlation_page.html index 051d84db..40d9836c 100644 --- a/wqflask/wqflask/templates/test_correlation_page.html +++ b/wqflask/wqflask/templates/test_correlation_page.html @@ -16,6 +16,8 @@ .trait_col { font-weight:bolder; text-align: center; + color:#036ffc; + /*font-size: 1.1em;*/ } table th { font-weight: bolder; @@ -27,17 +29,32 @@ .correlation-title h3 span { font-weight: bolder; } + .header-toggle-vis { + padding:10px 5px; + } + .header-toggle-vis button { + border-radius: 5px; + + } </style> {% endblock %} {% block content %} <div class="correlation-title"> - <h3>Correlation Results for <span>Dataset_name</span> against <span><a href="">trait_name</a></span> for the top <span>all</span>Results</h3> + <h3>Correlation Results for <span>Dataset_name</span> against <span><a href="">trait_name</a></span> for the top <span>all</span> Results</h3> +</div> +<div class="header-toggle-vis"> + <button class="toggle-vis" data-column="1">Index</button> + <button class="toggle-vis" data-column="2">Trait Name</button> + <button class="toggle-vis" data-column="3">Sample r</button> + <button class="toggle-vis" data-column="4">Sample P(r)</button> + <button class="toggle-vis" data-column="5">Num overlap</button> </div> <table id="example" class="display" width="100%"> <thead> <tr > + <th></th> <th>index</th> <th>trait_name</th> <th>Sample r</th> @@ -83,9 +100,10 @@ <script type="text/javascript"> $(document).ready(function() { - $('#example').DataTable( { + let table = $('#example').DataTable( { "data": correlationResults, "columns": [ + {"data":null,"width":"25px"}, { "data": "index","width":"120px","title":"Index" }, { "data": "trait_name","title":"TraitName"}, { "data": "corr_coeffient"}, @@ -93,16 +111,21 @@ { "data": "num_overlap"} ], "columnDefs": [ + { + targets:0, + data:null, + defaultContent: '', + orderable: false, + className: 'select-checkbox', + "render":(data,type,row)=>{ + return `<input type="checkbox" class="checkbox trait_checkbox" value="other">` + } - {className:"trait_col",targets:1}, + }, + {className:"trait_col",targets:2}, {className: "td-styles", targets: "_all"}, - { - orderable: false, - className: 'select-checkbox', - targets: 0 - }, { - "targets":1, + "targets":2, "render":(data,type,row)=>{ let urlLink = "/show_trait?trait_id=1453207_at&dataset=HC_M2_0606_P" let traitLink = `<a href=${urlLink}>${data}</a>` @@ -110,31 +133,16 @@ }, } - ], - select: { - style:'os', - selector: 'td:first-child' - } + ] } ); -} ); - - - // console.log(corr_data) - // $('#example').DataTable( { - // "data": corr_data, - // "columns": [ - // {"data":"other"}, - // {"data":"trait_name"} - // ] - // "columns": [ - // { "data": "index" }, - // { "data": "trait_name"}, - // { "data": "corr_coeffient"}, - // { "data": "p_value"}, - // { "data": "num_overlap"} - // ] - // } ); + $(":button.toggle-vis").on("click",function(e){ + e.preventDefault() + let column = table.column($(this).attr("data-column")); + column.visible(!column.visible()) + console.log($(this).attr("data-column")) + }) +} ); </script> {% endblock %}
\ No newline at end of file |