How to reload the data of a table with vue and axios?

UsmanBasharmal

Link to test case:
I want to refresh the table data after inserting my code is like below it does not load the data until I refresh it

```

         table() {    this.$nextTick(() => {
                    $('#sampleTable').DataTable();
                   })
                   },
                 get() {
                   axios.get('api/user').then(res => {
                    this.users = res.data
                    // console.log("after: " + this.users);
                    this.table()
                    });
                 axios.get("api/getRoles").then(({
                       data
                    }) => (this.roles = data));
                    // if (refreshIt == true) {

                        // this.retable();
                    // } else {

                       this.table();

                    // }

                $(".selectpicker").selectpicker();
            },
              create() {
                                // this.validation();
                this.form.post('api/user').then(() => {
                        $("#addnew").modal("hide");
                        toast.fire({
                            icon: "success",
                            type: "success",
                            title: "Information Created Successfully!"
                        });
                         Fire.$emit("refreshPage");
                        this.form.reset();

                    })
                    .catch(er => {
                        console.log(er);
                    });
             created() {
            // we call the show function here to be executed
                    this.get();

            Fire.$on("refreshPage", () => {

              this.get();


        });}

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

allan

I don't see how you are actually populating the table's data from the above? There isn't much for us to go on there. Can you please link to a test case as required in the forum rules.

Allan

UsmanBasharmal

Thanks for the prompt response, the data is properly displayed in the datatable I have only one problem I want to refresh the table after the new data is inserted without refreshing the page

I have tired clear(),draw(),destroy(), table.ajax.reload() but non of them works I think the problem is that I am getting the data via axios in vuejs

 <table class="table table-hover table-bordered dataTable no-footer "
                                                        id="sampleTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    id
                                                                </th>
                                                                <th>
                                                                    name
                                                                </th>
                                                                <th>
                                                                    Email
                                                                </th>
                                                                <th>
                                                                    status
                                                                </th>
                                                                <th>
                                                                    Modify
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr role="row" class="odd" v-for="user in users"
                                                                :key="user.id">
                                                                <td class="sorting_1">{{ user.id }}</td>
                                                                <td>{{user.name|ucfirst}}</td>
                                                                <td>{{user.email}}</td>
                                                                <td>{{user.status}}</td>

                                                                <td style="margin:auto;">
                                                                    <a href="#"><i class="fa fa-edit blue"></i></a>|
                                                                    <a href="#"><i class="fa fa-trash red"></i></a>
                                                                </td>

                                                            </tr>

                                                        </tbody>
                                                    </table>

kthorngren

table.ajax.reload()

This will only work if you are using ajax to load the table.

I'm not familiar with VUE but if the new data is using the for loop in the tbody then I would try using destroy() before you fetch the new data then reinitialize the Datatable after it has been loaded into the table.

Kevin

UsmanBasharmal

I have tired this $('#sampleTable').DataTable().destroy(); $('#sampleTable').DataTable(); but no result

UsmanBasharmal

I found the solution I destroy the datable in the create function $('#sampleTable').DataTable().destroy(); and then create it

table() {
            this.$nextTick(() => {
                $('#sampleTable').DataTable();
            })
        },


and call it in 

  created() {        
    Fire.$on("refreshPage", () => {
    this.get();
    });}

and then call the Fire.$emit("refreshPage");

in create function

    create() {
                        // this.validation();
        this.form.post('api/user').then(() => {
                $("#addnew").modal("hide");
                toast.fire({
                    icon: "success",
                    type: "success",
                    title: "Information Created Successfully!"
                });
                $('#sampleTable').DataTable().destroy();
                 Fire.$emit("refreshPage");

                this.form.reset();


            })
            .catch(er => {
                console.log(er);
            });



    },

```

allan

Thanks for the extra information. DataTables doesn't have any Vue bindings built-in (a plug-in for that is something I'm interested in doing in future), so if Vue updates the table's DOM, DataTables has no idea that has happened.

Thus you need to either:

1. Recreate the table as you have done, or
2. Don't use Vue to render the table's content - get DataTables to do it.

Basically, two libraries trying to control the same DOM elements == bad things will happen .

Allan