DataTableCondensate.vue

<template>
    <div>
        <a ref="download"></a>
        <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
    </div>
</template>

<script>
  const _ = require('lodash');
  const $ = window.jQuery = require('jquery');
  require('./js/datatable');

  let table;

  export default {
    name: 'data-table',
    props: ['id', 'data', 'keyword'],
    data() {
      return {
        selectedItem: 'Genes',
      };
    },
    // watch: {
    //   selectedItem: function update(newValue) {
    //     const vm = this;
    //
    //     switch (newValue) {
    //       case 'Genes':
    //       default:
    //         vm.createTable(vm.id, vm.data);
    //     }
    //   },
    // },
    methods: {
      moveDetailPage(uniProt) {
        const url = `/protein/${uniProt}`
        // eslint-disable-next-line
        // console.log(url)
        window.open(url)
      },
      createTable(id, data) {
        const vm = this;

        _.forEach(data, (d) => {
          d.DT_RowID = `${d.proteinId}`;
        });

        const columns = [
          {
            title: 'Gene Name',
            data: 'gene_name',
            fnCreatedCell: (nTd, sData, oData) => {
              $(nTd).html(`<a href="" class="url-link gene"> ${oData.gene_name}</a>`.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`));
            },
          },
          {
            title: 'Name',
            data: 'name',
          },
          {
            title: 'Species',
            data: 'species_name',
            render: function ( data, type, row, meta ) {
              return data + ' (' + row.species_tax_id + ')';
            }
          },
          {
            title: 'Uniprot',
            data: 'uniprot_id',
            // visible: false,
            // fnCreatedCell: (nTd, sData, oData) => {
            //   $(nTd).html(`<a href="" class="detail-link gene"><i class="glyphicon glyphicon-list-alt"></i> </a>`);
            // },
            render: function ( data, type, row, meta ) {
              return data + ' (' + row.uniprot_readable_id + ')';
            }
          }
        ];

        const nTableOptions = {
          columns,
          // aaSorting: [[ 0, 'asc' ]],
          paging: true,
          searching: true,
          info: true,
          data,
          order: [[3, 'asc']], // order: [[0, 'asc']],
          bDestroy: true, // Add this property to new setting,
          oLanguage: {
            sSearch: "Filter",
          },
          dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
        };

        const tableId = `#${id}`;
        if (table) {
          table.destroy();
          $(tableId).empty();
        }

        table = $(tableId).DataTable(nTableOptions);

        $("#download").html('<div style="text-align: right;"><div class="dropdown">\n' +
          '  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
          '    Download\n' +
          '  </button>\n' +
          '  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
          '    <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
          '    <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
          '    <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
          '  </div>\n' +
          '</div></div>');

        const tableBody = `${tableId} tbody`;

        $(tableBody).on('click', 'tr td a.detail-link', (e) => {
          e.preventDefault()
          const tr = $(e.target).parent().parent();
          const row = table.row(tr);
          // console.log(row.data().proteinName)
          vm.moveDetailPage(row.data().uniprot_id);
        });

        $('#download').on('click', 'a.dropdown-item', (e) => {
          e.preventDefault()
          switch ($(e.target).text()) {
            case 'CSV':
              vm.downloadCsv(); break;
            case 'TSV':
              vm.downloadTsv(); break;
            case 'JSON':
              vm.downloadJson(); break;
          }
        });
      },
      downloadCsv() {
        const vm = this;
        let exports = [];

        let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
        exports.push(header.join(', '));

        _.forEach(vm.data, item => {
          let goTerms = [];
          _.each(item.gos, (i) => {
            goTerms.push(`${i[1]}(${i[0]})`)
          })

          let tophits = [];
          _.each(item.em_tophits, (i) => {
            tophits.push(`${i}`)
          })
          _.each(item.ee_tophits, (i) => {
            tophits.push(`${i}`)
          })
          _.each(item.gm_tophits, (i) => {
            tophits.push(`${i}`)
          })

          exports.push([item.locusName, `"${goTerms.join('\t')}"`, `"${item.description}"`, tophits.join('\t')].join(','));
        })

        let blob = new Blob([exports.join('\n')], {type: 'text/csv'})

        let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
        let filename = contentDisposition.split('filename=')[1]
        filename = filename.replace(/"/g, '')

        let link = vm.$refs.download
        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.click()
      },
      downloadTsv() {
        const vm = this;
        let exports = [];

        let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
        exports.push(header.join('\t'));

        _.forEach(vm.data, item => {
          let goTerms = [];
          _.each(item.gos, (i) => {
            goTerms.push(`${i[1]}(${i[0]})`)
          })

          let tophits = [];
          _.each(item.em_tophits, (i) => {
            tophits.push(`${i}`)
          })
          _.each(item.ee_tophits, (i) => {
            tophits.push(`${i}`)
          })
          _.each(item.gm_tophits, (i) => {
            tophits.push(`${i}`)
          })

          exports.push([item.locusName, goTerms.join(', '), item.description, tophits.join(', ')].join('\t'));
        })

        let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})

        let contentDisposition = 'Content-Disposition: attachment; filename="download-data.tsv"'
        let filename = contentDisposition.split('filename=')[1]
        filename = filename.replace(/"/g, '')

        let link = vm.$refs.download
        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.click()
      },
      downloadJson() {
        const vm = this;
        let blob = new Blob([JSON.stringify(vm.data, null, 2)], {type: 'application/json'})

        let contentDisposition = 'Content-Disposition: attachment; filename="download-data.json"'
        let filename = contentDisposition.split('filename=')[1]
        filename = filename.replace(/"/g, '')

        let link = vm.$refs.download
        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.click()
      },
    },
    mounted() {
      const vm = this;
      vm.createTable(vm.id, vm.data);
    },
  };
</script>

<style>

    .no-padding {
        padding: 0;
    }

    .gene {
        font-size: large;
    }

    table.pheno {
        width: 330px;
    }

    td.pheno-title {
        text-align: center;
    }
    td.pheno {
        width: 33%;
        border-top: none;
        border-bottom: none;
        text-align: center;
        vertical-align: middle;
        font-size: small;
        word-wrap: break-spaces;
    }

    td.pheno-item {
        width: 33%;
        text-align: center;
        border-width: 0 1px;
        word-wrap: break-word;
    }

    .table thead td.pheno {
        border-width: 0 1px;
    }

    table.dataTable.row-border > tbody > tr:first-child > th,
    table.dataTable.row-border > tbody > tr:first-child > td,
    table.dataTable.display > tbody > tr:first-child > th,
    table.dataTable.display > tbody > tr:first-child > td {
        border-top: none;
    }

    table.dataTable.row-border > tbody > tr > th,
    table.dataTable.row-border > tbody > tr > td,
    table.dataTable.display > tbody > tr > th,
    table.dataTable.display > tbody > tr > td {
        border-top: 1px solid #ddd;
    }

    table.dataTable > tbody > tr {
        background-color: #ffffff;
    }

    table.dataTable.row-border > tbody > tr:hover,
    table.dataTable.display > tbody > tr:hover {
        background-color: #f6f6f6;
    }

    .url-link {
        color: #0065b9;
        font-weight: bold;
    }

    .tophit-link {
        color: #0065b9;
        font-weight: bold;
    }

    .dropdown-item {
        font-size: 1.2rem;
    }

    select.form-control {
        font-size: 12px;
        padding: 3px 12px;
    }

    .pagination {
        font-size: 1.2rem;
    }

    a mark {
        color: #0065b9;
        padding: 0;
        text-decoration: underline;
        font-style: oblique;
    }
</style>