如何在 jquery 数据表插件中重新加载数据集？答案

【问题标题】：How to reload dataset in jquery datatable plugin??如何在 jquery 数据表插件中重新加载数据集？
【发布时间】：2011-10-21 12:19:00
【问题描述】：

这里我在 asp.net 页面中使用 jquery 数据表插件

我目前正在处理基于用户操作在页面中刷新的表格。用户可以输入搜索字符串，表格会在带有结果的新 DIV 上打开。初始化表后，我无法使其正常工作。我尝试使用 fnDestroy 和 fnClearTable，但遇到了一些不同的问题。

使用 fnClearTable 时，尝试重新加载表时出现此错误：

"DataTables 警告（表 id = 'add_assets_table'）：无法重新初始化 DataTable。要检索此表的 DataTables 对象，请不向 dataTable() 函数传递任何参数，或者将 bRetrieve 设置为 true。或者，要销毁旧表并创建新表，请将 bDestory 设置为 true（请注意，可以通过 API 对配置进行很多更改，这通常会更快）。"

【问题讨论】：

标签： asp.net jquery-plugins datatable

【解决方案1】：

if (typeof oTable == 'undefined') {
            oTable = $('#example').dataTable( {
                "aaData": [
                    /* Reduced data set */
                    [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
                    [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
                    [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
                    [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
                    [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
                    [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
                    [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
                    [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
                    [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
                    [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
                    [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
                    [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
                ],
                "aoColumns": [
                    { "sTitle": "Engine" },
                    { "sTitle": "Browser" },
                    { "sTitle": "Platform" },
                    { "sTitle": "Version", "sClass": "center" },
                    {
                        "sTitle": "Grade",
                        "sClass": "center",
                        "fnRender": function(obj) {
                            var sReturn = obj.aData[ obj.iDataColumn ];
                            if ( sReturn == "A" ) {
                                sReturn = "<b>A</b>";
                            }
                            return sReturn;
                        }
                    }
                ]
            } );
    }
    else {
        var dataset = [
                    /* Reduced data set */
                    [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
                    [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
                    [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
                    [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
                    [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
                    [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
                    [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
                    [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
                    [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
                    [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
                    [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
                    [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
                ];
        oTable.fnClearTable(0);
        oTable.fnAddData(dataSet);
        oTable.fnDraw();

    }

fnClearTable() 用于清除表格。 fnAddData() 用于添加新数据集。 fnDraw() 重绘表结构。

【讨论】：