vue 3 datatable

script.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <h1>Datatable Vue 3 </h1>inspired from
    <a
      href="https://therichpost.com/vue-3-how-to-use-jquery-datatable-in-vuejs-application/"
      target="_blank"
    >
      Vue 3 – How to use jquery datatable in vuejs application?
    </a>
    <br />
    <a
      href="https://therichpost.com/vue-3-datatable-with-export-buttons-print-csv-copy-with-dynamic-data/"
      target="_blank"
    >
      Vue 3 Datatable with Export Buttons Print Csv Copy with Dynamic Data
    </a>

    <p>Ma petite adaptation avec on click en vue : clique sur une ligne</p>

    <p>datatables.net works with Vue 3 but not in codepen.io with vue 3 so easy: See document ready at the end.</p>

    <table class="table table-hover table-bordered" id="example">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Job Title</th>
        </tr>
      </thead>
      <tbody>
        <tr @click="toto(user)" v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.job_title }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
var  mytable

export default {
  data: function () {
    return {
      users: []
    };
  },
  methods: {
    toto(user) {
      alert(user.name);
    }
  },
  mounted() {
    //API Call
    axios.get("https://www.testjsonapi.com/users/").then((res) => {
      this.users = res.data;

    });
  }
};

$( document ).ready(function() {
                  
     setTimeout(function () {
      var  mytable= $("#example").DataTable({
       
          pagingType: "full",
          pageLength: 3,
          processing: true,
          dom: "Bfrtip",
          buttons: ["copy", "csv", "print"],
          
        }); 
      }, 3000);
});
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.25.0/axios.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.4.0/js/dataTables.searchPanes.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/colreorder/1.5.5/css/colReorder.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" rel="stylesheet" />

vue-3-datatable.markdown

vue 3 datatable

A Pen by phili_b on CodePen.

License.