Question

My requirement is the following:

From my ASPX page I import data from a spreadsheet using fileUpload and dynamically generate an ASP.NET table. The table rows and columns dimensions and data are set by the file itself – that means my application has no knowledge of rows and columns until the data is imported.

What I would like to do is to apply jQuery DataTables plugin to my dynamically generated table. The table is generated when user clicks the Import button on the page.

The problem I have is that the jscript to format the table runs before the table is available and therefore DataTable plug-in complains about columns. The error reads:

Unable to get value of the property ‘aoColumns’: object is null or undefined

I’ve tried to add the following code to my Button_Click event but it happens before the table is loaded:

ClientScript.RegisterClientScriptBlock(Me.GetType(), “FormatTable”, “FormatTable();”, True)

The jscript is the following:

  function FormatTable() {
                    var oTable = $('#tblMyTable).dataTable({
                        "bJQueryUI": true,
                        "sScrollY": "300px",
                        "sScrollX": "100%",
                        "sScrollXInner": "150%",
                        "bScrollCollapse": true,
                        "bPaginate": false
                    });
                    new FixedColumns(oTable);
    };

I made sure the table is well-formed with table, thead, tr, th, tbody, tr, td. When the table is generated from code behind, it is inserted in a server placeholder control.

So my question is: how can I successfully format a server generated table using jQuery DataTables plug-in ? Thank you very for any help.

Answer 1

In this case you want your code to execute after the DOM is ready.
For this jQuery provides the ready function.

Call your FormatTable only after the DOM is ready as follows.

ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatTable", 
                    @"$(document).ready(function() {FormatTable();});", True);