jQuery数据表中没有可用的数据问题

时间:2019-06-25 08:09:53

标签: vue.js datatables

我正在使用C#和Vue Js开发系统,我需要在表中显示一些数据,因为我已经使用了JQuery数据表。 在我的情况下,所有数据和选项(搜索和分页)都在显示,但问题出在表的第一行,显示为“表中没有可用数据” ,如果我们强制(Ctrl + F5)先刷新然后按表运行良好。

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

1)这样显示第一页加载表之后。

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

First Load Image

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

enter image description here

这是我用于实现的代码。

Vue组件。

 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>

1 个答案:

答案 0 :(得分:2)

初始化数据表时,也许您的ajax请求没有完成。在组件中创建另一个方法以初始化数据表。例如:initDt() {}

由于nextTick(),它将在表渲染完成后初始化DataTable。

未经测试的代码,范围应该有问题,我使用的是箭头() => {}函数而不是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",
                }
            });    
        }
    }
});