host-sequences-table.html 2.07 KB
Newer Older
1
2
3
4
<div class="container-fluid">
  <div class="row mb-2" id="host-actions">
  </div>
</div>
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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(() => {
28
    const tableHostSequences = $('#host-sequences-table').DataTable({
29
      dom: `
30
        <".container-fluid"
31
          <".row my-2"
32
33
34
35
36
37
38
39
            <".mr-auto"i>
            <"#search-host-sequences.mr-2"f>
          >
          <".row"t>
          <".row"
            <".mr-auto"l>
            <".ml-auto"p>
          >
40
        >
41
42
43
44
45
46
      `,
      buttons: [
        {
          extend: 'csv',
          text: 'Download as CSV',
          titleAttr: 'Download tables in comma-separated-values format',
47
          className: 'btn btn-primary',
48
49
50
51
52
53
54
55
          filename: 'cv19dpes_genomic_host_sequences_search',
        },
      ],
      processing: true,
      ordering: true,
      initComplete: () => {
        console.log("init complete");
      }
56
57
    });

58
59
60
    // When used with Bootstrap, datatables buttons must be appended to DOM to make them visible.
    tableHostSequences.buttons().container().prependTo('#host-actions');

61
    // Move download button next to filter search box.
62
63
    const downloadButtonHostSequences = document.querySelector('#host-actions .dt-buttons');
    const searchHostSequences = document.querySelector('#search-host-sequences');
64
65
66
    searchHostSequences.insertAdjacentElement('afterend', downloadButtonHostSequences);
  });
</script>