Question

<table cellpadding="0" cellspacing="0" border="1" class="display" id="FormsData" style="margin-bottom:5px;">
    <thead>
        <tr id="thFormsData"> 

        </tr>
        <tr>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td class="dataTables_empty">
                Loading data ...
            </td>
        </tr>
    </tbody>          
</table>

Above is the table structure for jQuery datatable. and I am using below code to fill it.

$(document).ready(function() { 
   $('#FormsData').dataTable({
        "sDom": 'T<"clear">lfrtip',
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "GetJsonData.aspx?FormKey=" + getQuerystring("FormKey", "") + "&FormData=Get"
  )}
)}

Now problem is that in this way I have to define th in table structure which jQuery datable is using as columns. But in my case I want to append th dynamically to the table before it initialize.

I want to append th based on json data which I get from GetJsonData.aspx file. Its defined in “sAjaxSource”: “GetJsonData.aspx …”

Answer 1

There is a good example of loading dynamically from an JS array http://www.datatables.net/examples/data_sources/js_array.html

Here you need only to replace the static data with the data returned from the webservice.

var url = "GetJsonData.aspx?FormKey=" + getQuerystring("FormKey", "") + "&FormData=Get";

$.getJSON(url, function(data) {
    //test response and manipulate structure if necissary

    $('#example').dataTable( {
        "aaData":data,
        "aoColumns": [
            { "sTitle": "Engine" },
            { "sTitle": "Browser" } // etc...
        ]
    });
});

The aoColumns will also allow you to dynamically render the columns.