Applying a jQuery DataTable plug-in to dynamically generated tables from ASP.NET

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.

nunespascal · Accepted Answer · 2012-08-19 06:58:22Z

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);

answered Aug 19, 2012 at 6:58

nunespascal

17.7k2 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1309226 Over a year ago

Hi nunespascal. Your suggestion worked brilliantly. Much appreciated. I'm up and running.

Collectives™ on Stack Overflow

Applying a jQuery DataTable plug-in to dynamically generated tables from ASP.NET

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related