Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 – How to use jquery datatable in vuejs application?
Friends with this post, we will cover with below functionalities:
- How to fetch and show api json data in vuejs application?
- How to use jquery datatable in vuejs application?
- Veujs datatable with dynamic data.
Experts : Vue Data table with Export Buttons(Print, CSV etc.).
Vue 3 came and if you are new then you must check below two link:
Friends now I proceed onwards and here is the working code snippet for Vue 3 – How to use jquery datatable in vuejs application? and use this carefully to avoid the mistakes:
1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have datatable, jquery, bootstrap and axios modules in our Vue 3 application:
npm install -g @vue/cli vue create vuedatatable cd vuedatatable npm install --save datatables.net-dt npm install jquery --save npm i axios npm i bootstrap npm run serve //http://localhost:8080/
2. Now friends we need to add below code into src/App.vue file to check the final output on browser:
<template>
<h1>Therichpost.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>
Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Please include file export buttons: csv, excel, pdf
Sure and very soon.
Still waiting… 🙂
Sorry busy in projects and will do. 🙂
In my case “no data available in table”, how do i solve the problem?
Use like this:
setTimeout(function(){ $(‘#example’).DataTable(); }, 3000);
Thanks
import axios from ‘axios’;
export default {
mounted() {
axios
.get(“API”)
.then((res)=>
{
this.users = res.data;
setTimeout(function(){
$(‘#example’).DataTable();
},
3000
);
})
},
data: function() {
return {
users:[]
}
},
}
is it right?
but still can’t show the data
Correct.
And please try this API first:
https://www.testjsonapi.com/users/
thank you, it’s work but if i change with different API it doesn’t work, still can’t show the data
Then you can increase the time session:
setTimeout(function(){ $(‘#example’).DataTable(); }, 5000);
Check this:
https://therichpost.com/vue-3-datatable-with-export-buttons-print-csv-copy-with-dynamic-data/
https://therichpost.com/vue-3-datatable-with-export-buttons-print-csv-copy-with-dynamic-data/
Hello,
I am developing application for patient record system and need best pagination. I am using latest technologies – Laravel 8, Vue 3, and bootstrap. So, it is good to use jquery datable for pagination and search for the data and I also need to export the data in excel.
I hope you will provide me best answer and the examples for it.
thanks
Yes it is good and check this data table with export example:
https://therichpost.com/vue-3-datatable-with-export-buttons-print-csv-copy-with-dynamic-data/
in case of insertions, and real time update of the data, is it good idea to use it ?
Yes it is good because it has many options like pagination, searching and sorting and if you want like export buttons as well then please check below link:
https://therichpost.com/vue-3-datatable-with-export-buttons-print-csv-copy-with-dynamic-data/
Thanks.
This is awesome. May God bless you.
Great.
Thanks for this.
You are welcome.
Hi Man, how can I add styles with bootstrap to the table? because a tried putting classes but it doesn’t work:( hope you can help me
Yes we can do and I will show you working example.
Hello there.
I’ve tried your code to use DataTables with Vue 3, but I’m facing two problems:
– The data is not being rendered once loaded from the API. I’ve tried with the setTimeout fix, but it still doesn’t work.
– I’m using Vue Router, and when I navigate to another route/component, the DataTables wrapper with header and footer, remains, as if it was not unmounted, and the content of the other component is rendered inside it. Really weird! When I go back to the route/component using DataTables, it is rendered again, inside the unmounted wrapper. So, it’s nesting a new DataTables display inside the old wrapper, showing header and footer twice, 3 times, 4 and so on as I go back.
SURE AND I WILL GET BACK TO YOU 🙂
Man, thanks. I’ll really appreciate it.
Hello, it didn’t work in my vue.js-3
I did exactly all. The format and structure is like datatable but none is functional. if we click any -> sort, search or row filters change, it goes blanks. And on footer, there is -> Showing 0 to 0 of 0 entries, prev and next is like dummy.
I hope you have solution in vue 3 to show datatable and proper functional.
Can you please tell me the error in your console?
DataTables.vue:47 Uncaught TypeError: $(…).DataTable is not a function
how to fix this error in vue 3
I will make updated code and show you working thanks.