DataTables - 从旧表中删除数据并初始化一个新表

时间:2016-08-04 14:00:18

标签: jquery vue.js datatables-1.10 vue-resource

我遇到了数据表的问题,我用它来显示我从vuejs请求中获取的数据但我似乎无法获取数据并在我再次发出请求后对其进行排序。

我的第一个请求让数据恢复正常,就像这样

var dates = this.dates;
    var when = this.dates.when;

    this.$http.get('getProfitsFrom='+when, dates, function(response){

        this.response = response;

        window.setTimeout(function(){
            this.table = $('#table').DataTable({
                "aoColumns": [
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true }
                ] 
            });
        }, 1);

    }).error(function(){
        console.log("Error");
    });

从我这里得到数据后,表格填充得很好,我可以正确排序但是当我发出新的请求时它会破坏表格,它会用数据填充表格,但是当我点击它时只有它显示第一个请求的初始数据。

这让我相信我需要首先删除数据并销毁表格,但我似乎没有做任何事情。

将提供任何帮助,并提供所需的任何进一步信息,谢谢

编辑:我基本上需要知道重新初始化表,以便它是一个填充了我传入的新值的新表。

2 个答案:

答案 0 :(得分:1)

很抱歉,我将此帖子作为答案而不是评论发布,但我的声誉很低,无法发表评论。

在jsfiddle中,您可以使用假的ajax请求来模拟对php后端的调用。

您是否还有使用jQuery DataTables的特定原因?有一个非常好的vue组件也是如此(默认使用bootstrap样式,但您可以根据需要设置样式)https://github.com/matfish2/vue-tables

答案 1 :(得分:1)

如果您通过ajax加载数据,请创建表ajax loaded。您需要重新处理json响应的结构。另请参阅this

从那里,你可以调用table.draw();重装它。