my app is with laravel and vue.js, I have a table with data, but I get the message,No data available

slara

$(document).ready(function() {

    $('#table_id').DataTable();
    

} );

export default {
        data() {
            return {
                editmode: false,
                listProjects : {},
            }
        },   
        methods: {
            loadProjects(){
                axios.get("projects").then(({ data }) => (this.listProjects = data.data));
            },
        },
        created() {
           this.loadProjects();
        },                
        mounted() {
            console.log('Component mounted.')
        }
    }

===================
the data is displayed but the first row shows the message "No data available in table",, how do I solve this problem.???

Also, It does not let me perform any action, since it erases the data

colin

Hi @slara ,

If you're getting the "No data available" message and data in the table, it suggests that the data is being loaded into the DOM after the table has been initialised.

I'm not familiar with laravel, but could this be case, and if so, could you postpone the table initialisation until all the data has been created?

Cheers,

Colin

noogen

I've created a Vue wrapper component here: https://github.com/niiknow/vue-datatables-net

I'm also using it with laravel-datatables server-side endpoint just fine.

colin

Hi @noogen ,

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin