带有VueJ的JQuery数据表中没有可用的数据问题

Shakir Ahamed |

我正在使用C＃和Vue Js开发系统，我需要在表中显示一些数据，因为我已经使用了JQuery数据表。在我的情况下，所有数据和选项（搜索和分页）都在显示，但是问题出在表的第一行，如果我们强制（Ctrl + F5）刷新，则表工作正常，显示为“表中没有可用数据”。

注意：我在堆栈溢出中搜索有关此问题的信息，我曾尝试过与之相关的一些问题，但我无法弄清楚。请帮助我解决此问题。

1）在第一页加载表显示如下后。

注意：如果我在搜索栏中搜索了某些内容，则所有数据都不会消失。

2）强制刷新表显示如下并正常工作后。

这是我用于实现的代码。

组件视图。

 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>

热尔加·查萨巴（Gergely Csaba）

初始化数据表时，也许您的ajax请求没有完成。在组件中创建另一个方法以初始化数据表。例如：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",
                }
            });    
        }
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。