Ajax Serverside data only gets displayed if HTML table has predefined header row

mokumax

We are passing the column names with our JSON data in an Ajax call. We used "aoColumns" with "sTitle". The JSON is well formed but it won't display on the page unless we hard code the column names in the HTML header row.

The 2 issues we have are:

1. the data doesn't display unless we hard code the HTML header row (....)
2. the column header names don't get updated with the sTitle we pass in our JSON data.

ANY help would be greatly appreciated. We are trying to get server side paging working without having to define the header row columns each time we want to use it.

Here is the HTML:

[code]
colcolcolcolcolcolcolcolcol
[/code]


Here is the jquery call:

[code]

$(document).ready(function(){
jqDataTable571();
});
function jqDataTable571() {
$('#tblDT571').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "getdata.aspx",
"sAjaxDataProp": "aaData",
"sPaginationType": "full_numbers",
"bDeferRender": true,
"aaSorting": []
});
}

[/code]


Here is the JSON returned.

[code]
{
"sEcho": 1,
"iTotalRecords": "1000",
"iTotalDisplayRecords": "25",
"aoColumns": [{
"sTitle": "RowIndex"
}
, {
"sTitle": "CompanyInfo_FileNameURL"
}
, {
"sTitle": "CompanyName"
}
, {
"sTitle": "NumProfileVisits"
}
, {
"sTitle": "A_City"
}
, {
"sTitle": "A_Region"
}
, {
"sTitle": "CompanyTypeName_Short"
}
, {
"sTitle": "IsMyFav_Disp"
}
, {
"sTitle": "AccountImportance_Disp"
}
, {
"sTitle": "CurrentRelationshipStatus_Disp"
}
, {
"sTitle": "FID4744_Disp"
}
, {
"sTitle": "FID4745_Disp"
}
, {
"sTitle": "FID4746_Disp"
}
, {
"sTitle": "FID4747_Disp"
}
],
"aaData": [["1", "default.aspx?tabid=132&companyid=133974", "Alaska Area Native Health Service [MSA - Anchorage AK]", "0", "Anchorage", "AK", "IDN", "", "", "", "", "", "", ""], ["2", "default.aspx?tabid=227&companyid=1672", "Alaska Native Medical Center", "0", "Anchorage", "AK", "Hosp, Acute, Gen'l", "", "", "", "", "", "", ""]]
[/code]

mokumax

Another thing, is that these do nothing.

[code]
"iTotalRecords": "1000",
"iTotalDisplayRecords": "25",
[/code]

allan

> We are passing the column names with our JSON data in an Ajax call. We used "aoColumns" with "sTitle". The JSON is well formed but it won't display on the page unless we hard code the column names in the HTML header row.

Correct - the JSON return that DataTables expects contains only data - not header information (i.e. aoColumns) as well - other parameters such as aoColumns will not be processed. This is because you cannot include functions in the JSON return since that would make it invalid JSON.

If you want to do what you are, then you would need to make the Ajax call yourself and pass the aoColumns option to the DataTables initialisation object from the returned JSON. You could then have DataTables make the Ajax call to get the at a, or give it the data from your own call as the aaData parameter.

> Another thing, is that these do nothing.[...]

Those are used for pagination - see: http://datatables.net/usage/server-side

Allan

mokumax

Thanks Allan. Another quick question.. we are building the JSON result set ourselves as a string so that we can include ""iTotalRecords", "iTotalDisplayRecords", etc.

Is there a best practice for building that json string? for example, escaping single quotes, etc.

We are using vb.net (but examples in c# are welcomed as well).

Thanks again,
Craig

allan

> Is there a best practice for building that json string? for example, escaping single quotes, etc.

Yes - make it valid JSON :-). http://json.org/ . Presumably there is a toJsonString function or something similar in .NET somewhere (I'm afraid I don't know .NET so I'm not really able to offer much help here) - but if there is a built in library, just use that as a single call rather than doing it yourself.

Regards,
Allan

mokumax

Will do, thanks again Allan!