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>

Csaba Gergely · Accepted Answer · 2019-06-25 08:33:23Z

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",
                }
            });    
        }
    }
});

aerial · Accepted Answer · 2022-01-26 00:13:12Z

1

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",
    }
  });
}

edited Jan 26, 2022 at 0:13

aerial

1,1983 gold badges10 silver badges15 bronze badges

answered Jan 19, 2022 at 17:06

Manish Kumar Dholpuriya

114 bronze badges

Comments

Rahul · Accepted Answer · 2023-02-28 17:12:32Z

0

Try this table compatible with vue 2 and vue 3

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

answered Feb 28, 2023 at 17:12

Rahul

7201 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

No data available issue In JQuery Data table With VueJs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related