host-sequences-table.html

<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>
      <th scope="col">{{ i18n "accession_id" }}</th>
      <th scope="col">{{ i18n "description" }}</th>
      <th scope="col">{{ i18n "country" }}</th>
      <th scope="col">{{ i18n "region" }}</th>
    </tr>
  </thead>
  <tbody>
    {{ range $index, $entry := $.Site.Data.c19pes_host_sequences.host_sequences }}
    <tr>
      <td><a target="_blank" href='{{print "https://www.ebi.ac.uk/ena/browser/view/" .accession_id}}'>{{ .accession_id }}</a></td>
      <td>{{ .description }}</td>
      <td>{{ .country }}</td>
      <td>{{ .region }}</td>
    </tr>
    {{ end }}
  </tbody>
</table>

<script>
  $(document).ready(() => {
    const tableHostSequences = $('#host-sequences-table').DataTable({
      dom: `
        <".container-fluid"
          <".row my-2"
            <".mr-auto"i>
            <"#search-host-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_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('#host-actions .dt-buttons');
    const searchHostSequences = document.querySelector('#search-host-sequences');
    searchHostSequences.insertAdjacentElement('afterend', downloadButtonHostSequences);
  });
</script>