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

• javascript
• vue.js
• datatable
• datatables

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

Update 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();
       })
     }
   }