Using jQuery DataTables with vuejs

Question

My Scenario: Hey im sustaining a system that retrieves data from a database and and then passes that data to vue.js with in turn displays it in jQuery DataTabes.

The problem i have is that when DataTables is originally initialized it seems the data is saved in the table i initialized. When i retrieve new information it doesn't update the existing data and it breaks the table.

also the data coming back from the request is exactly what i need its just the DataTables that's giving me a problem

What I've Tried:

destroying the table using $('#table').DataTable.destroy() and then re-initializing it: either says cannot re-initialize datatables or just displays old data as usual.

Re-initializing the table with a new ID and changing the current table id to math the new ID: just doesn't work displays the table as a normal table not a datatable.

My Question:

How do i use DataTables with vuejs to pull NEW data without refreshing the page?

or

How to i remove and re-initialize datatables?

Edit: if there are any other plugins like DataTables then i'd love to know about them.

@gurghet thanks for the reccomendation! but one vital feat that is required in the table is that it has to be sortable. Im not very good with vue.js and dont know how to use most of the components used in this table. — Kenziiee Flavius
– Kenziiee Flavius, Commented Aug 12, 2016 at 15:59
it is sortable, I'm sorry it's not clear from the readme. in particular is sortable numerically, lexicographically and with custom functions. About the components, you don't need them, they are optional. — gurghet
– gurghet, Commented Aug 12, 2016 at 16:00
Just use the redraw function of data tables inside a watch or computed property stackoverflow.com/questions/11785494/… — vbranden
– vbranden, Commented Aug 14, 2016 at 2:58
Here is the official doc for the draw function datatables.net/reference/api/draw() — vbranden
– vbranden, Commented Aug 14, 2016 at 3:16

Chris Landeza · Accepted Answer · 2017-01-05 04:22:22Z

0

How do i use DataTables with vuejs to pull NEW data without refreshing the page?

Let Datatable do this job and use its server-side processing feature: https://datatables.net/examples/data_sources/server_side.html

If you're using Vue 1.x and you want your action buttons works e.g.: you're returning an html with uncompiled vue directives in your json - you can just recompile the datatables wrapper everytime you fetch new data:

$('#datatable').dataTable({
   ...
    drawCallback: function (settings) {
        var $element = $('#datatable');
        vm.$compile($element.get(0)); // vm refers to Vue instance
    },
 ...
});

Note: $compile has been removed in Vue 2.x

answered Jan 5, 2017 at 4:22

Chris Landeza

1,1743 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richi González Over a year ago

What's an alternative for v2?

Noogen · Accepted Answer · 2018-11-05 19:21:55Z

0

For client-side data, you can probably do something like this:

dataTable.clear().draw();
dataTable.rows.add(newDataArray).draw();

(Shameless Plug) I also wrote a wrapper plugin that may help integrate directly with server-side: https://github.com/niiknow/vue-datatables-net

MIT so you are free to use it as you wish or browse through the code to get an idea of how to use jQuery DataTables with Vue.

answered Nov 5, 2018 at 19:21

Noogen

1,65212 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using jQuery DataTables with vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related