最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to refresh datatables with new data in vuejs? - Stack Overflow

programmeradmin3浏览0评论

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
 |  Show 4 more ments

2 Answers 2

Reset to default 6 +150

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();
       })
     }
   }
发布评论

评论列表(0)

  1. 暂无评论