Vue Js Dynamic jQuery DataTables Tutorial Example

Vue js jquery dataTable example. In this tutorial, you will learn how to use jquery dataTables in Vue js app. And as well as, how to display dynamic data into table using json apis with jQuery dataTable in vue js app.

This tutorial will guide you step by step on how to use jQuery datatable in vue js app. And you can easily use jQuery dataTable in vue.js and display data using json apis.

How to use jquery dataTable in vuejs app

Just follow the following steps and implement jquery dataTable in vuejs application:

• Step 1 – Create New VUE JS App
• Step 2 – Install jQuery DataTable Library
• Step 3 – Create Component
• Step 4 – Add Component on main.js
• Step 5 – Import Component on App.vue

Step 1 – Create New VUE JS App

In this step, open your terminal and execute the following command to create new vue js app:

vue create my-app

Step 2 – Install jQuery DataTable Library

In this step, open your terminal and execute the following commands to install jQuery datatable library and bootstrap in your vue js app:

cd my-app

npm install --save datatables.net-dt

npm install jquery --save

npm i axios

npm i bootstrap

Step 3 – Create Component

In this step, visit /src/components directory and create a new component called VueDataTable.vue and add the following code into it:

<template>

  <h1>Vue 3 jQuery DataTable Example Tutorial - Tutsmake.com</h1>

   <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 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>

</template>

<script>
//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min.js';
//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import $ from 'jquery';


import axios from 'axios';
export default {

  mounted(){
    //API Call
    axios
    .get("https://www.testjsonapi.com/users/")
    .then((res)=>
    {
      this.users = res.data;
      $('#example').DataTable();
    })
  },
  data: function() {
        return {
            users:[]
        }
    },
}
</script>

Step 4 – Add Component on main.js

In this step, visit /src/ directory and main.js file. And then add the following code into it:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Step 5 – Import Component on App.vue

In this step, import component inside src >> App.vue file, as shown below:

// App.vue

<template>
  <div id="app">
    <vue-data-table></vue-data-table>
  </div>
</template>

<script>
import VueDataTable from './components/VueDataTable'

export default {
  name: 'app',
  components: {
    VueDataTable
  }
}
</script>

Conclusion

Vue js jquery datatable example. In this tutorial, you have learn how to use jquery datatables in vue js app. And as well as, how to display dynamic data into table using json apis with jQuery datatable in vue js app.

Recommended VUE JS Tutorials