CODEWITHSUNDEEP
javascriptjqueryvue.jsdatatablesvuejs2
CoderPJ
CoderPJ

Reputation: 1011

"No data available in table" VueJS

I am building a real time web application. The server runs on Node.js and the client is written in VueJS. I have written an API to fetch player information. When I hit the REST end point, data gets displayed in the form of a table. Although, the data gets displayed right, the first rows says "No data available in table".

Picture

Here is my code

import urlMixin from "./../mixins/url.js";

export default {

    data() {
        return {
            playerData: "",
            errors:[]
        }
    },

    created: function(){
        this.getAllPlayers();
    },

    mixins: [urlMixin],

    methods: {
        getAllPlayers: function(){
            axios.get(`${this.url}/players`)
            .then(response =>{
                console.log(response.data.results);

                this.playerData = response.data.results;

                for(let i=0; i<this.playerData.length;i++){
                    this.playerData[i].image = 
                        "data:image/jpeg;base64," +
                        btoa(
                            new Uint8Array(this.playerData[i].image.data).reduce(
                                (data, byte) => data + String.fromCharCode(byte),
                                ""
                        )
                    );
                }

            })
            .catch(e => {
                this.errors.push(e);
            });
        }
    },

    mounted() {

        $(function() {
            $('#player-table').DataTable({
                dom: '<"ui center aligned"f><"ui segment"t><"right-aligned-panel"p>',
                language: {
                    info: "",
                    paginate: {
                        first: "first",
                        previous: "<i class='fa fa-chevron-left'></i>",
                        next: "<i class='fa fa-chevron-right'></i>",
                        last: "last"
                    }
                }
            });

        });

    }
}
<style scoped>
    .bread-segment {
        margin-bottom: 10px;
        background: none;
        box-shadow: none;
        border: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template>
	<div class="ui center aligned animated fadeIn" style="padding:20px;">
		<table id="player-table" class="ui small table selectable " cellspacing="0" width="100%">
				<thead>
					<tr>
                        <th>Photo</th>
                        <th>Name</th>
						<th>Age</th>
						<th>Sex</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="playerInfo in playerData">
						<td><img class="ui mini rounded image" :src="playerInfo.image"></td>
                  
                        <td><a :href="'#/profile?name='+playerInfo.fname+'%20'+playerInfo.lname">{{playerInfo.fname}} {{playerInfo.lname}}</a></td>
                        
						<td>{{playerInfo.age}}</td>
						<td>{{playerInfo.sex}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

What wrong am I doing? How can I make sure that the text "No data available in table" doesn't appear?

Upvotes: 1

Views: 6973

Answers (3)

yassine
yassine

Reputation: 117

That's because datatable is processing the table before vuejs. A trick is to encapsulate your $(..).datatable() in to a SetTimemout JS function

setTimeout(() => {
   $(..).datatable()
}, 250) //customize this

Upvotes: 0

Brian Lee
Brian Lee

Reputation: 18187

You're changing the context of this in the getAllPlayers methods by using function. Instead, use es6 arrow notation like this:

getAllPlayers: () => {
    ....
        this.playerData = response.data.results;
    ....
}

Upvotes: 1

Daniel
Daniel

Reputation: 35684

You're using jQuery, DataTables and Vue all together. While this is possible to do, the lifecycle functions of these libraries are bound to interfere.

vue community has several table libraries such as https://github.com/matfish2/vue-tables-2

Upvotes: 2

Related Questions