Failed request api

Attitude007

Hello there, i made research on this forum but i can't found something working for me, so i really think that i'm doing something wrong with my datatable

Image :

And here the part code (using datatable + bootstrap 4 + VueJS)

I don't know if you need more informations about the code like the template with table construction or something else

import axios from "axios";
export default {
    data() {
        return {
            datatable: null,
            info: [],
            datatable_config: {
                destroy: true,
                stateSave: true,
                lengthChange: true,
                lengthMenu: [10, 25, 50, 100, -1],
                order: [[1, "asc"]],
                pageLength: 10,
                paging: true,
                ordering: true,
                info: true,
                responsive: true,
                pagingType: "full_numbers",
                dom: "Blfrtip",
                buttons: ["..."],
            },
        };
    },

    methods: {
        loadData() {
            axios.get("my_request").then(({ data }) => {
                this.info = data;
                this.$forceUpdate();
            });

                       // this.info = [...] Here i tried with local data
        },

    mounted() {
        this.loadData();
        this.$nextTick(function () {
            this.datatable = $("#datatableCollaborateur").DataTable(this.datatable_config);
        });
    },
}

Curently my problem is with the loadData IF I do it locally without the axios request everything is working fine, my table apear, my filter, search, column visibility etc etc everything works LOCALLY But...

Once i try to add the axios request ... My table can't load anymore, i get an empty table and i can't find the way to force the render of the table with the new data imported from Api

• i didn't see anyone puting tbody on their code when they build the table's skeleton, is it a problem too if i do?

Sorry for my mistakes in english AND with dataTables i'm a beginner with both of it

allan

I haven't used Axios so I can't say for sure, but does the promise for the loadData complete after the DataTable has already been initialised? If so you need to use the DataTables API to add the data to the existing table - rows.add() specifically.

Allan

Attitude007

Yeah it's totally that, the table is initialised and the promise is done after the table creation, i already tryed to use the rows.add() But like i said i think it doesn't work cuz of how i built the table.
I'm doing a for inside tbody like this i can use vue to have some option and creating better content (like using <span></span>) to apply badge or icons
I could trick it by putting a setTimeout on my loadData ... But it's not really "clean" and i wondering if there were no others way to do it better ^^'

So, do you think it's only cuz of axios and it's not possible to use it to get the data ?

Attitude007

Ok, i'll be honnest, i think i was a bit to must obsess with my project and couldn't get out of it... Taking a break, and redone it from scratch and it's working fine ^^ I'm sorry for these questions
I can't even explain what i was doing wrong but i think i was just too much focus on it and needed to sleep

Ty anyway for help Allan

colin

Glad to hear all working!

Colin