Javascript 防止JQuery Datatables在销毁后将旧数据保留在表中

你好

绘制场景： 我有一个为工作而工作的场景，在这个场景中，我必须在较大的表上冻结标题行和第一列。我使用了

jquerydatatables

插件及其

fixedColumns

扩展来实现这一点

我正在处理的表也碰巧有

knockout.js

绑定，它根据在页面的typescript中获得的数据呈现

行

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

模块数据表{
导出类dataTableClass{
applyTable（tableIdString:string）：无效{
（$（tableIdString））
.数据表({
卷轴：1000，
是的，
对,，
分页：false，
搜索：假，
fixedHeader:true，
固定列：{
leftColumns:1
}
});
}
dataTableExists（tableIdString:string）：布尔值{
返回（$.fn.DataTable.isDataTable（TabledString））；
}
applyDatatableIfTableExists（retryCount:number，elementId:string）：无效{
如果（！elementId）{
console.warn（“未定义表id”）；
返回；
}
如果（！retryCount）{
retryCount=0；
}否则如果（retryCount>100）{
console.warn（“无法将表转换为数据表”）；
返回；
}
window.setTimeout（（）=>{
var tableIdString=“#”+elementId；
if（$（tableIdString））.length可以从表体或整个表中删除旧数据。这取决于以后是否重新创建列标题

例如：

$（'#示例'）.DataTable（）.destroy（）；
$（'#示例tbody'）.empty（）；

因此，在您的情况下，它将类似于：

（$（tableIdString））.DataTable（）.destroy（）；
（$（tableIdString+'tbody'））.empty（）；
啊，谢谢。我将在周一上班时试一试。请了一天假
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);
    }
}