3

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

salin kunwar
  • 1,128
  • 3
  • 13
  • 22
  • could you please share more of your code where we can see, how you get the new data and so on.. – Christopher Supertramp Jul 20 '18 at 06:38
  • try `$('#datatable').DataTable().ajax.reload();` – dhaker Jul 20 '18 at 06: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 Jul 20 '18 at 06:40
  • show your code. – wobsoriano Jul 20 '18 at 06:41
  • Share your entire code fore better understanding – raw_hitt Jul 20 '18 at 06:43
  • I have updated my question with pastebin link. Please go through it. – salin kunwar Jul 20 '18 at 11:20
  • if you have done it right way, the content should get replace with new one. I cant just tell you whats the issue but what I think is in many cases I have seen is how you set your reactive properties and are they really reactive after initialization. plz check [this](https://vuejs.org/v2/guide/reactivity.html) official docs for reactivity if you think that might be the case here. – parth joshi Jul 20 '18 at 11:35
  • 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()](https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue) . [Here is a similar question](https://stackoverflow.com/questions/32755853/implementing-vue-js-datatables-properly) that might help you – Belahcel Yanis Jul 22 '18 at 18:56
  • @salinkunwar: regarding your bounty, if you are unhappy with the "_current answers_", you should comment them saying in what respect they lack some details, so that their authors have a chance to improve them. You could also consider removing the _accepted_ flag (if you can). – ghybs Jul 27 '18 at 02:57

2 Answers2

6

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.

Niroj Adhikary
  • 1,775
  • 18
  • 30
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();
       })
     }
   }
Xavier Vansteene
  • 1