viral-sequences-table.html

<p>
  This section shows the samples sequenced from Severe acute respiratory syndrome coronavirus 2 (taxon: 2697049) in Spain. These results are periodically retrieved from ENA.
</p>
<p class="text-right">
  Powered by <a href="https://www.ebi.ac.uk/ena/browser/home"><img src="{{ .Site.Params.images.logos.ena }}" alt="ENA" style="max-height: 3rem;"></a>
</p>
<div class="container-fluid">
  <div class="row mb-2" id="viral-actions">
  </div>
</div>
<table class="table table-hover table-sm table-responsive w-100" id="viral-sequences-table" style="display: table;">
  <thead class="thead-light">
    <tr>
      <th scope="col">{{ i18n "accession_id" }}</th>
      <th scope="col">{{ i18n "collection_date" }}</th>
      <th scope="col">{{ i18n "country" }}</th>
      <th scope="col">{{ i18n "host" }}</th>
      <th scope="col">{{ i18n "isolate" }}</th>
      <th scope="col">{{ i18n "molecule_type" }}</th>
      <th scope="col">{{ i18n "taxon" }}</th>
    </tr>
  </thead>
  <tbody>
    {{ range $index, $entry := $.Site.Data.c19dpes_genomics_viral_sequences.viral_sequences }}
    <tr>
      <td><a target="_blank" href='{{print "https://www.ebi.ac.uk/ena/browser/view/" .accession_id}}'>{{ .accession_id }}</a></td>
      {{ $col_date := print (substr .collection_date 0 4) "-" (substr .collection_date 4 2) "-" (substr .collection_date  6 2)}}
      <td>{{ dateFormat "Jan 2, 2006" $col_date  }}</td>
      <td>{{ .country }}</td>
      <td>{{ .host }}</td>
      <td>{{ .isolate }}</td>
      <td>{{ .molecule_type }}</td>
      <td>{{ .taxon }}</td>
    </tr>
    {{ end }}
  </tbody>
</table>

<script>
  $(document).ready(() => {
    var tableViralSequences = $('#viral-sequences-table').DataTable({
      dom: `
        <".container-fluid"
          <".row my-2"
            <".mr-auto"i>
            <"#search-viral-sequences.mr-2"f>
          >
          <".row"t>
          <".row"
            <".mr-auto"l>
            <".ml-auto"p>
          >
        >
      `,
      buttons: [
        {
          extend: 'csv',
          text: 'Download as CSV',
          titleAttr: 'Download tables in comma-separated-values format',
          className: 'btn btn-primary',
          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('#viral-actions .dt-buttons');
    const searchViralSequences = document.querySelector('#search-viral-sequences');
    searchViralSequences.insertAdjacentElement('afterend', downloadButtonViralSequences);
  });


</script>