How to refresh datatables with new data in vuejs?

Question

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

could you please share more of your code where we can see, how you get the new data and so on.. — Christopher Supertramp
– Christopher Supertramp, Commented Jul 20, 2018 at 6:38
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
– salin kunwar, Commented Jul 20, 2018 at 6:40
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
– Belahcel Yanis, Commented Jul 22, 2018 at 18:56

Niroj Adhikary · Accepted Answer · 2018-07-23 05:04:20Z

Update your code like this, it should work

$('.reportDataTableModelWise').DataTable().destroy();

before calling data from this.$store.commit('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.

Xavier Vansteene · Accepted Answer · 2020-07-29 09:11:48Z

0

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

answered Jul 29, 2020 at 9:11

Xavier Vansteene

1

Collectives™ on Stack Overflow

How to refresh datatables with new data in vuejs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related