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

Posted

技术标签:

【中文标题】DataTables - 从旧表中删除数据并初始化一个新表【英文标题】:DataTables - Remove data from old table and initialise a new one 【发布时间】:2016-12-10 16:54:54 【问题描述】:

我在使用数据表时遇到问题,我用它来显示我从 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");
    );

在我从这里获取数据后,表格填充得很好,我可以对其进行正确排序,但是当我提出新请求时它会破坏表格,它会用数据填充表格,但是当我点击排序时显示第一个请求的初始数据。

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

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

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

【问题讨论】:

你能用jsFiddle添加一个例子吗? 我不能,因为要提取的数据来自我服务器后端的 php 脚本 【参考方案1】:

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

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

还有你使用 jQuery DataTables 的特定原因吗?有一个非常不错的 vue 组件,它的功能相同(默认使用引导样式,但您可以根据需要设置样式)https://github.com/matfish2/vue-tables

【讨论】:

我已经找到了我的问题的答案!摆弄之后 当我有空的时候我会把它作为答案,但是谢谢你让我知道这在未来会非常有用 np。期待您的解决方案【参考方案2】:

如果您通过 ajax 加载数据,请将您的表设为ajax loaded。您将需要重新设计 json 响应的结构。另见this。

从那里,您可以调用 table.draw();重新加载它。

【讨论】:

以上是关于DataTables - 从旧表中删除数据并初始化一个新表的主要内容,如果未能解决你的问题,请参考以下文章

数据库如何增加字段

在创建新表时插入另一个表中的值

SQL将计算列添加到表中

高性能mysql读书笔记:Schema与数据类型优化

SQL数据库 新表里的数据都从另外两个基本表中获得

使用 CSS 隐藏行而不是使用 DataTables 删除节点