Commit d1ef757e authored by Albert Hornos Vidal's avatar Albert Hornos Vidal
Browse files

feat(#18): add download csv from search buttons on genomics tables

parent ae811bae
......@@ -5,4 +5,12 @@ menu:
name: Genomics
weight: 1
type: genomics
# https://datatables.net/download/
css:
- https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.7/datatables.min.css
js:
- https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js
- https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js
- https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.7/datatables.min.js
---
{{ define "main" }}
{{ if .Params.css }}
{{ range .Params.css }}
<link rel="stylesheet" href="{{ . }}">
{{end}}
{{ end }}
{{ if .Params.js }}
{{ range .Params.js }}
<script src="{{ . }}"></script>
{{end}}
{{ end }}
<div class="container">
<h1>{{ .Title }}</h1>
{{ .Content }}
......@@ -29,7 +42,7 @@
</div>
<div class="tab-pane fade" id="host-sequences-content" role="tabpanel" aria-labelledby="host-sequences-tab">
<article>
{{ partial "genomics/host-sequences-table.html" . }}
<div style="text-align:center"><img src="/images/banners/coming-soon-banner.png" style="margin-top: 2rem;" width="200"></div>
</article>
</div>
<div class="tab-pane fade" id="genomic-resources-content" role="tabpanel" aria-labelledby="genomic-resources-tab">
......
<div class="container-fluid">
<div class="row mb-2" id="host-actions">
</div>
</div>
<table class="table table-hover table-sm table-responsive" id="host-sequences-table" style="display: table;">
<thead class="thead-light">
<tr>
......@@ -19,30 +23,44 @@
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(() => {
const covicatTable = $('#host-sequences-table').DataTable({
const tableHostSequences = $('#host-sequences-table').DataTable({
dom: `
<".container-fluid"
<".row"
<".mr-auto"i>
<"#search-2.mr-2"f>
<".container-fluid"
<".row"
<".mr-auto"i>
<"#search-host-sequences.mr-2"f>
>
<".row"t>
<".row"
<".mr-auto"l>
<".ml-auto"p>
>
>
<".row"t>
<".row"
<".mr-auto"l>
<".ml-auto"p>
>
>
`,
ordering: false,
`,
buttons: [
{
extend: 'csv',
text: 'Download as CSV',
titleAttr: 'Download tables in comma-separated-values format',
className: 'dp-button',
filename: 'cv19dpes_genomic_host_sequences_search',
},
],
processing: true,
ordering: true,
initComplete: () => {
console.log("init complete");
}
});
// When used with Bootstrap, datatables buttons must be appended to DOM to make them visible.
tableHostSequences.buttons().container().prependTo('#host-actions');
// Move download button next to filter search box.
const downloadButtonHostSequences = document.querySelector('#download-button-2');
const searchHostSequences = document.querySelector('#search-2');
const downloadButtonHostSequences = document.querySelector('#host-actions .dt-buttons');
const searchHostSequences = document.querySelector('#search-host-sequences');
searchHostSequences.insertAdjacentElement('afterend', downloadButtonHostSequences);
});
</script>
<table class="table table-hover table-sm table-responsive" id="viral-sequences-table" style="display: table;">
<div class="container-fluid">
<div class="row mb-2" id="viral-actions">
</div>
</div>
<table class="table w-100" id="viral-sequences-table">
<thead class="thead-light">
<tr>
<th scope="col">{{ i18n "accession_id" }}</th>
......@@ -25,30 +29,46 @@
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(() => {
const covicatTable = $('#viral-sequences-table').DataTable({
var tableViralSequences = $('#viral-sequences-table').DataTable({
dom: `
<".container-fluid"
<".row"
<".mr-auto"i>
<"#search-2.mr-2"f>
<".container-fluid"
<".row"
<".mr-auto"i>
<"#search-viral-sequences.mr-2"f>
>
<".row"t>
<".row"
<".mr-auto"l>
<".ml-auto"p>
>
>
<".row"t>
<".row"
<".mr-auto"l>
<".ml-auto"p>
>
>
`,
ordering: false,
`,
buttons: [
{
extend: 'csv',
text: 'Download as CSV',
titleAttr: 'Download tables in comma-separated-values format',
className: 'dp-button',
filename: 'cv19dpes_genomic_viral_sequences_search',
},
],
processing: true,
ordering: true,
initComplete: () => {
console.log("init complete");
}
});
// When used with Bootstrap, datatables buttons must be appended to DOM to make them visible.
tableViralSequences.buttons().container().prependTo('#viral-actions');
// Move download button next to filter search box.
const downloadButtonViralSequences = document.querySelector('#download-button-2');
const searchViralSequences = document.querySelector('#search-2');
const downloadButtonViralSequences = document.querySelector('#viral-actions .dt-buttons');
const searchViralSequences = document.querySelector('#search-viral-sequences');
searchViralSequences.insertAdjacentElement('afterend', downloadButtonViralSequences);
});
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment