Question

美好的一天

绘制场景： 我有一个我正在努力工作的场景，我不得不冻结大表上的标题行和第一列。我已使用jquery Datatables插件及其fixedColumns扩展程序来执行此操作

我正在处理的表格恰好也有knockout.js个绑定，这会从页面打字稿中获取的数据中呈现<tbody>行。

问题当我从服务器获取数据以从表中获取数据，页面刷新或与页面上其他控件的交互时，我运行以下代码（请注意，它非常难看 - 只是试图获取它现在工作）：

module dataTable {
export class dataTableClass {
    applyTable(tableIdString: string) : void {
        (<any>$(tableIdString))
            .DataTable({
                scrollY: 1000,
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                searching: false,
                fixedHeader: true,
                fixedColumns: {
                    leftColumns: 1
                }
            });
    }

    dataTableExists(tableIdString: string): boolean {
        return (<any>$.fn.DataTable.isDataTable(tableIdString));
    }

    applyDatatableIfTableExists(retryCount: number, elementId: string): void {
        if (!elementId) {
            console.warn("table id not defined.");
            return;
        }

        if (!retryCount) {
            retryCount = 0;
        } else if (retryCount > 100) {
            console.warn("could not convert table to dataTable.");
            return;
        }

        window.setTimeout(() => {
            var tableIdString = "#" + elementId;
            if ((<any>$(tableIdString)).length <= 0) {
                this.applyDatatableIfTableExists(++retryCount, elementId);
            } else {
                if (this.dataTableExists(tableIdString)) {
                    debugger;
                    (<any>$(tableIdString)).DataTable({ retrieve: true }).destroy(); // <-- issue here. it seems to restore old data to the now-datatable-less table
                }

                window.setTimeout(() => {
                    this.applyTable(tableIdString);
                    if (!this.dataTableExists(tableIdString)) {
                        this.applyDatatableIfTableExists(++retryCount, elementId);
                    }
                }, 250);    

                if (!(<any>$(tableIdString)).hasClass(".dataTable")) {
                    (<any>$(tableIdString)).addClass(".dataTable");
                }
            }
        }, 250);
    }


    applyDataTable(id) {
        this.applyDatatableIfTableExists(0, id);
    }
}

}

在服务器上拉，在typescript中，当延迟代码解析并在挖掘可观察数组上设置表的数据时，applyDataTable类将使用表的html ID调用
所有代码第一次运行正常 - 我允许浏览器一段时间渲染表并将表转换为DataTable
当用户与页面上的其他控件交互时（为knockout Observable数组设置过滤器以更改表的内容），我会销毁该表 - 假设该表已经初始化。
我在此之后立即重新创建具有相同DataTable选项的表，以便在表中显示新数据（理论上），使fixedColumns扩展名再次正确呈现（因为它将单元格和表格标题单元格更改为表格他们自己并应用css使它看起来整洁）

问题出现在我标记的行上。屏幕上发生的事情是它肯定会删除DataTables从HTML中应用的更改，但是，呈现的表中包含旧数据（即使我通过更改页面上的搜索条件从服务器获取新数据 - 生成新的......）。

同时在我的applyDataTable（）方法中注释掉所有这些代码，它从不在我的html表上设置数据表插件（如预期的那样），并且更改我的过滤器反映了我桌面上最新和正确的数据。

所以在tl; dr中 - 发生的事情是某些状态信息由数据表存储。有没有办法让我清除这个状态，只在我的html表格中应用我的设置数据？

Answer 1

您可以从表格主体或整个表格中删除旧数据。这取决于您是否稍后重新创建列标题。

例如：

$('#example').DataTable().destroy();
$('#example tbody').empty();

所以在你的情况下它会是这样的：

(<any>$(tableIdString)).DataTable().destroy();
(<any>$(tableIdString + ' tbody')).empty();

防止JQuery数据表在被销毁后保留表中的旧数据

1 个答案: