LlpsTable.vue

<template>
    <div>
        <div class="inline-block no-underline font-bold mb-4">
        </div>
        <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/clipboard')
  require('@/components/js/datatable');

  let table;

  export default {
    name: 'llps-table',
    props: ['id', 'data'],
    data() {
      return {
      };
    },
    methods: {
      fetchProtein(uniprot_id) {
        // eslint-disable-next-line
        const url = `/protein/${uniprot_id}`
        // // eslint-disable-next-line
        // console.log(url)
        window.open(url)
      },
      forwardUniprot(uniprot_id) {
        // eslint-disable-next-line
        const url = `https://www.uniprot.org/uniprot/${uniprot_id}`
        // // eslint-disable-next-line
        // console.log(url)
        window.open(url)
      },
      createTable(id, data) {
        const vm = this;

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

        const columns = [
          {
            title: 'Name',
            data: 'name',
            fnCreatedCell: (nTd, sData, oData) => {
              if (sData) {
                $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
              } else {
                $(nTd).html(`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`);
              }
            },
          },
          {
            title: 'Species',
            data: 'species_name',
            className: "text-nowrap"
          },
          {
            title: 'UniProt',
            data: 'uniprot_id',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              $(nTd).html(`<a href="" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
                    aria-label="Clicking this link opens UniProt page."> ${sData} <i class="glyphicon glyphicon-link"></i></a>`);
            },
          },
          {
            title: 'Sequence',
            data: 'sequence',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              $(nTd).html(`<input type="text" value="${sData}">
                    <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
            },
          }
        ];

        const nTableOptions = {
          columns,
          // aaSorting: [[ 0, 'asc' ]],
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
          paging: true,
          searching: true,
          info: false,
          data,
          order: [], // order: [[0, 'asc']],
          bDestroy: true, // Add this property to new setting,
          oLanguage: {
            sSearch: "Filter",
          },
        };

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

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

        const tableBody = `${tableId} tbody`;

        $(tableBody).on('click', 'tr td a.protein-link', (e) => {
          e.preventDefault()
          const tr = $(e.target).parent().parent();
          const row = table.row(tr);
          vm.fetchProtein(row.data().uniprot_id);
        });

        $(tableBody).on('click', 'tr td a.uniprot-link', (e) => {
          e.preventDefault()
          const tr = $(e.target).parent().parent();
          const row = table.row(tr);
          vm.forwardUniprot(row.data().uniprot_id);
        });
      },
      exportTsv() {
        // const vm = this;
      },
    },
    mounted() {
      const vm = this;
      vm.createTable(vm.id, vm.data);
    },
  };
</script>

<style>
    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;
    }

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

    ul.pagination {
        font-size: 1rem;
    }

    .form-inline .form-control {
        height: 25px;
        line-height: 25px;
        vertical-align: middle;
    }

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

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

    .pagination {
        font-size: 1.2rem;
    }
</style>