Vue js dynamic jquery datatable; Through this tutorial, i am going to show you how to use jquery datatables to display dynamic data into table using json apis with jQuery datatable in vue js app.
Vue Js Dynamic jQuery DataTables Example Tutorial
Use the below given steps and integrate jquery datatables to display dynamic data into table using json apis with jQuery datatable in vue js app:
- Step 1 – Create New VUE JS App
- Step 2 – Install jQuery DataTable Library
- Step 3 – Create Component
- Step 4 – Import Component on main.js
- Step 5 – Import Component on App.vue
Step 1 – Create New VUE JS App
Run the following command on terminal to create new vue js app:
vue create my-app
Step 2 – Install jQuery DataTable Library
Run the following commands on terminal 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
Go to /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 - Laratutorials.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 – Import Component on main.js
Go to /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
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.