CODEWITHSUNDEEP
jqueryvue.jsdatatables-1.10vue-resource
Kenziiee Flavius
Kenziiee Flavius

Reputation: 1947

DataTables - Remove data from old table and initialise a new one

Im having trouble with datatables, im using it to display data that i get back from a vuejs request but i cant seem to get the data back and sort it after i make a second request.

my first request gets the data back just fine like this

var dates = this.dates;
    var when = this.dates.when;

    this.$http.get('getProfitsFrom='+when, dates, function(response){

        this.response = response;

        window.setTimeout(function(){
            this.table = $('#table').DataTable({
                "aoColumns": [
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true }
                ] 
            });
        }, 1);

    }).error(function(){
        console.log("Error");
    });

After i get the data from here the table is populated just fine and i can sort it properly but then when i make a new request it breaks the table, it populates the table with the data but then when i click sort it only shows the initial data from the first request.

This lead me to believe that i need to firstly remove the data and destroy the table but nothing i seem to do has worked.

Any help appreciated and any further information needed will be provided, thank you

EDIT: What i basically need is to know to re-initialize the table so it would be a new table populated with the new values that i pass in.

Upvotes: 0

Views: 256

Answers (2)

Brian Kates
Brian Kates

Reputation: 488

If you are loading the data via ajax, make your table ajax loaded. You will need to re-work the structure of your json response. Also see this.

From there, you can can call table.draw(); to reload it.

Upvotes: 1

Sven
Sven

Reputation: 153

Sorry I post this as answer instead of comment, but my reputation is to low to post comments.

In jsfiddle you can use the fake ajax requests to emulate your call to your php backend.

Also is there a specific reason you are using jQuery DataTables? There is a very nice vue component which does the same (default with bootstrap styling, but you can style it as you like) https://github.com/matfish2/vue-tables

Upvotes: 1

Related Questions