Ajax Serverside data only gets displayed if HTML table has predefined header row
Ajax Serverside data only gets displayed if HTML table has predefined header row
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]
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]
This discussion has been closed.
Replies
[code]
"iTotalRecords": "1000",
"iTotalDisplayRecords": "25",
[/code]
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
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
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