Question

Here I am working with jquery data table plugin in asp.net page

I’m currently working with a table that is refreshed in page based on user actions. Users are able to enter in a search string and the table opens on a new DIV with the results. I’m having issues getting the table to work properly once it has been initialized. I’ve tried using fnDestroy as well as fnClearTable but am running into a few different issues.

When using fnClearTable, I get this error when trying to reload the table:

“DataTables warning (table id = ‘add_assets_table’): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestory to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).“

Answer 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() used for clear table. fnAddData() used for add new data set. fnDraw() redraw table structure.