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, Aug 12 '16 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, Aug 12 '16 at 16:00
Just use the redraw function of data tables inside a watch or computed property http://stackoverflow.com/questions/11785494/refresh-or-reload-datatable — vbranden, Aug 14 '16 at 02:58
Here is the official doc for the draw function https://datatables.net/reference/api/draw() — vbranden, Aug 14 '16 at 03:16
Please see my linked answer to a similar question, and see if it solves your issue: http://stackoverflow.com/questions/32755853/implementing-vue-js-datatables-properly/36039381#36039381 — Nik, Aug 16 '16 at 14:00

score 0 · Answer 1 · answered Jan 05 '17 at 04:22

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

What's an alternative for v2? – Richi González Sep 09 '18 at 23:03 — Richi González, Sep 09 '18 at 23:03

score 0 · Answer 2 · answered Nov 05 '18 at 19:21

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.

Using jQuery DataTables with vuejs

2 Answers2