Vue js jquery datatables with export buttons example. In this tutorial, you will learn how to use jquery datatables with export button in vue js app. And as well as, how to display and export 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 vuejs app with export buttons in datatables. and fetch and show api json data in vuejs app.
Vue JS DataTable Export Data using Print Csv Copy Button Example
Just follow the following steps and learn How to use jquery datatable in vuejs app with export buttons in datatables. and fetch and show api json data in vuejs app:
- Step 1 – Create New VUE JS App
- Step 2 – Install jQuery DataTable and Export Button 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 and Export Button Library
In this step, open your terminal and execute the following commands to install jQuery dataTable library, bootstrap and export button library in your vue js app:
cd my-app npm install datatables.net --save npm install datatables.net-dt --save npm install datatables.net-buttons --save npm install datatables.net-buttons-dt --save npm install @types/datatables.net-buttons --save-dev npm install jquery --save npm i bootstrap npm i axios
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 class="text-center">Vue JS DataTable Export Data with Print Csv Copy Button Example - 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'; //for table good looks
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 "datatables.net-buttons/js/dataTables.buttons.js"
import "datatables.net-buttons/js/buttons.colVis.js"
import "datatables.net-buttons/js/buttons.flash.js"
import "datatables.net-buttons/js/buttons.html5.js"
import "datatables.net-buttons/js/buttons.print.js"
import $ from 'jquery';
import axios from 'axios'; //for api calling
export default {
mounted(){
//Web api calling for dynamic data and you can also use into your demo project
axios
.get("https://www.testjsonapi.com/users/")
.then((res)=>
{
this.users = res.data;
setTimeout(function(){
$('#example').DataTable(
{
pagingType: 'full_numbers',
pageLength: 5,
processing: true,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'print'
]
}
);
},
1000
);
})
},
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 datatables with export buttons example. In this tutorial, you have learned how to use jquery datatables with export button in vue js app. And as well as, how to display and export dynamic data into table using json apis with jQuery datatable in vue js app.
