No data available issue In JQuery Data table With VueJs

Question

I'm developing a system using C# and Vue Js, I need to show some data in table, for that I have use JQuery Data Table. In my case all the data and options (search and pagination) is showing but problem is in table's top row showing as "No data available in Table" if we do force (Ctrl + F5) refresh then table is working perfectly.

Note : I searched regarding this problem in stack overflow there were some related questions I tried with those but I couldn't figure it out. Please help me to resolve this problem.

1) after the first page load table is showing like this.

Note :If I searched something in search bar all data get not apear.

2) after force refresh table is showing like this and working perfectly.

This is the code's I have use for the implementation.

Vue Component.

 Vue.component('all-enquiry', {
    template: ' <table id="allenquiry" class="table table-striped table-bordered" cellspacing="0" style="width:100% !important"><thead><tr><th>Date<small>/Time</small></th><th>Hndle.By</th><th>Ref:No</th><th>Name</th><th>Destination</th><th>Dep.Date</th><th>Ret.Date</th><th>Airline</th><th>Status</th><th class="disabled-sorting text-right">Actions</th></tr></thead><tbody class="tbody-text"><tr v-for="enq in enquiryall"><td>{{ enq.CreatedDate | formatDate }}</td><td>{{ enq.HandleBy }}</td><td>{{ enq.EnqRefno }}</td><th>{{ enq.PaxName }}</th><td>{{ enq.DepartingTo }}</td><td>{{ enq.DepartingDate }}</td><td>{{ enq.ReturnDate }}</td><td>{{ enq.Airline }}</td><td><button class="btn btn-info btn-sm btn-round">Following Up</button></td><td class="text-right"><button class="btn btn-success btn-sm btn-round">More Info</button></td></tr></tbody></table >',
    data() {
        return {
            enquiryall: '',
        }
    },
    created: function () {      
        this.getall();
    },
    methods: {
        getall: function () {
            var enquiryform = this
            axios.get("/Main/getAllenq/").then(function (response) {
                enquiryform.enquiryall = response.data.allenquiry;

            });


        }
    }
});

Table Initialization.

$(document).ready(function () {
    $('#allenquiry').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        }

    });   
});

Html

<div class="card-body">
    <div class="toolbar">
    </div>
    <all-enquiry></all-enquiry>
</div>

Answer 1

Try this table compatible with vue 2 and vue 3

https://www.npmjs.com/package/data-table-vue

Answer 2

Use axios on mounted and create datatable on updated life-cycle method

mounted(){
  axios
  .get('/estimator')
  .then(response => {
    this.items = response.data;
    // console.log(response.data);
  })
},

updated(){
  var datatable = $('#datatable').DataTable({
    "pagingType": "full_numbers",
    "lengthMenu": [
      [10, 25, 50, -1],
      [10, 25, 50, "All"]
    ],
    responsive: true,
    language: {
      search: "_INPUT_",
      searchPlaceholder: "Search estimator",
    }
  });
}

Answer 3

Maybe your ajax request not finished when you initialize the DataTables. Create an other method in the component to initialize the datatables. eg: initDt() {}

Because of the nextTick() it's going to initialize the DataTables when the table render finished.

Code not tested, it should have problems with the scopes, i'm using arrow () => {} functions instead of function().

Vue.component('all-enquiry', {
    template: '...',
    data() {
        return {
            enquiryall: '',
        }
    },
    created: function () {      
        this.getall();
    },
    methods: {
        getall: function () {
            var enquiryform = this
            axios.get("/Main/getAllenq/").then(function (response) {
                enquiryform.enquiryall = response.data.allenquiry;
                enquiryform.$nextTick(function() {
                    enquiryform.initDt()
                });
            });
        },
        initDt() {
            $('#allenquiry').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                }
            });    
        }
    }
});