Нет доступных данных В таблице данных JQuery

Question

Я разрабатываю систему с использованием C # и Vue J, мне нужно показать некоторые данные в таблице, для этого я использую таблицу данных JQuery.В моем случае все данные и параметры (поиск и разбиение на страницы) отображаются, но проблема в верхней строке таблицы, которая отображается как «Нет данных в таблице» , если мы принудительно (Ctrl + F5) обновим, тогда таблицаработает отлично.

Примечание. Я искал эту проблему в переполнении стека. Были некоторые связанные вопросы, которые я пытался решить, но я не смог их решить.Пожалуйста, помогите мне решить эту проблему.

1) после того, как таблица загрузки первой страницы выглядит следующим образом.

Примечание. Если я что-то искал в строке поиска, все данные не отображаются.

2) после отображения таблицы принудительного обновлениякак это и работает отлично.

Это код, который я использую для реализации.

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;

            });


        }
    }
});

Таблица инициализации.

$(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

Возможно, ваш ajax-запрос не был завершен при инициализации DataTables.Создайте другой метод в компоненте для инициализации таблиц данных.Например: initDt() {}

Из-за nextTick() он будет инициализировать DataTables, когда закончится рендеринг таблицы.

Код не проверен, у него должны быть проблемы с областями, яиспользование функций стрелка () => {} вместо 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",
                }
            });    
        }
    }
});