I am using datatables 1.10.19
in vue js. Here i have dynamic table on clicking some button it filters and replace table by new data to tr tag of table.How can i refresh table with new content? i used clear
, destroy
but no thing works.Here is my entire code.
Code Link
I am using datatables 1.10.19
in vue js. Here i have dynamic table on clicking some button it filters and replace table by new data to tr tag of table.How can i refresh table with new content? i used clear
, destroy
but no thing works.Here is my entire code.
Code Link
Share Improve this question edited Jul 20, 2018 at 11:19 salin kunwar asked Jul 20, 2018 at 6:36 salin kunwarsalin kunwar 1,1883 gold badges14 silver badges24 bronze badges 9- could you please share more of your code where we can see, how you get the new data and so on.. – Christopher Supertramp Commented Jul 20, 2018 at 6:38
-
try
$('#datatable').DataTable().ajax.reload();
– dhaker Commented Jul 20, 2018 at 6:39 - i am using datatables with vue js. For the first time datatable works but on calling dynamic data using filter and reinatilize it, it wont work. – salin kunwar Commented Jul 20, 2018 at 6:40
- show your code. – wobsoriano Commented Jul 20, 2018 at 6:41
- 2 The problem may be caused by the DOM data not being updated before you update the dataTable. So you have to wait for next Tick by using this.$nextTick() . Here is a similar question that might help you – Belahcel Yanis Commented Jul 22, 2018 at 18:56
2 Answers
Reset to default 6 +150Update your code like this, it should work
$('.reportDataTableModelWise').DataTable().destroy();
before calling data from this.$store.mit('modelWiseTabularReport');
and update your updated code like this
this.$nextTick(function() {
$('.reportDataTableModelWise').DataTable({
'destroy' : true,
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'order' : [[ 5, 'desc' ]],
'info' : true,
'autoWidth' : false,
'dom' : 'Blfrtip',
'buttons' : [
{
'extend': 'csv',
'title': this.$route.meta.report_name + ' Report'
},
{
'extend': 'pdf',
'title': this.$route.meta.report_name + ' Report'
},
{
'extend': 'print',
'title': this.$route.meta.report_name + ' Report'
}
]
});
});
The $nextTick
is necessary to ensure Vue has flushed the new data to the DOM, before re-initializing.
You could also redraw yout table by using :
...
watch: {
myData () { // data used in the table
this.$nextTick (() => { // wait until data fully updated before re-render new DOM
$('.reportDataTableModelWise').DataTable().draw();
})
}
}