Skip to content

Instantly share code, notes, and snippets.

@philibe

philibe/script.vue

Created January 22, 2022 22:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save philibe/4b325bb1f1c1b13a418a58227eb66425 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save philibe/4b325bb1f1c1b13a418a58227eb66425 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. philibe created this gist Jan 22, 2022.
    104 changes: 104 additions & 0 deletions script.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    <!-- 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>
    9 changes: 9 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <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>
    4 changes: 4 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <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" />
    7 changes: 7 additions & 0 deletions vue-3-datatable.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    vue 3 datatable
    ---------------


    A [Pen](https://codepen.io/phili_b/pen/poWMpGo) by [phili_b](https://codepen.io/phili_b) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/poWMpGo).