CODEWITHSUNDEEP
javascriptvue.jsdatatabledatatables
salin kunwar
salin kunwar

Reputation: 1188

How to refresh datatables with new data in vuejs?

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

Upvotes: 3

Views: 9871

Answers (2)

Xavier Vansteene
Xavier Vansteene

Reputation: 1

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

Upvotes: 0

Niroj Adhikary
Niroj Adhikary

Reputation: 1835

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.

Upvotes: 6

Related Questions