error in data table if columns displayed is higher than 16 columns

geekinpurpleandpink

hi,

I am currently implementing a data table with columns higher than 16 columns for export purposes, I am also using a server side implementation that gets the value from a wcf service.

my issue is that if my columns displayed or retrieved is higher than 16 columns the data table does not display properly and it causes and error.

is there a known issue for this or did anyone encountered the same scenario?

here is my table initialization

[code]
/*Actual Table Initialization*/
var oTable = $("#dataTableCustom").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": globalSource,
"sPaginationType": "full_numbers",
"sDom": '<"clear">' + tableTools + addNewItem + '<"export"><"clear">frtip<"clear">B<"clear">l',
"oTableTools": {
"sSwfPath": "/_layouts/Images/Main/tabletools/copy_cvs_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"bFooter": false
},
{
"sExtends": "csv",
"sFileName": "Export.csv",
"bFooter": false
},
{
"sExtends": "xls",
"sFileName": "Export.xls",
"bFooter": false
},
{
"sExtends": "pdf",
"sFileName": "Export.pdf",
"sPdfOrientation": "landscape",
"bFooter": false
},
{
"sExtends": "print",
"bFooter": false
}
]
},
"fnServerData": function (sSource, aoData, fnCallback) {

//Sorting
if ($("#dataTableCustom thead tr .sorting_asc").parent().text() != '') {
wcfSortDirection = 'asc';
wcfSorColumns = $("#dataTableCustom thead tr .sorting_asc").text();
}

if ($("#dataTableCustom thead tr .sorting_desc").parent().text() != '') {
wcfSortDirection = 'desc';
wcfSorColumns = $("#dataTableCustom thead tr .sorting_desc").text();
}

//Filtering
if (footerFilters == "") {
var x = 0;
$("#dataTableCustom tfoot tr th").each(function () {

var filterValue = $.trim($("select", this).val());
if (filterValue != "" && filterValue != "undefined") {
footerFilters += filterValue + ";;" + (x - 1) + ";#";
}
x = x + 1;
});
}

searchText = $(".dataTables_filter label input").val();


//Disable browser caching
$.ajaxSetup({ cache: false });
$.getJSON(sSource, aoData, function (json) {
//return the caching to enable
$.ajaxSetup({ cache: true });

var parsedJSON = $.parseJSON(json);
fnCallback(parsedJSON);
});
},
"fnServerParams": function (aoData) {
aoData.push({
"name": "listName",
"value": wcfListName
})
aoData.push({
"name": "columnNames",
"value": wcfColumnsToDisplay
})
aoData.push({
"name": "SortingDirection",
"value": wcfSortDirection
})
aoData.push({
"name": "sortingColumns",
"value": wcfSorColumns
})
aoData.push({
"name": "searchText",
"value": searchText
})
aoData.push({
"name": "manCompanyController",
"value": selController
})
aoData.push({
"name": "footerFilter",
"value": footerFilters
})
},
"aoColumnDefs": [
{
"fnRender": function (oObj) {
var editLink = "";
if (userPermissionInitial == "v") {
if (pageMode == "export") {
var colFirst = oObj.aData[0];
editLink = colFirst;
}
}
else if (pageMode == "export") {
var colFirst = oObj.aData[0];
editLink = colFirst;
}
else {
var colFirst = oObj.aData[0];
var colID = oObj.aData[indexID];
editLink = '' + colFirst + '';
}
return editLink;
},
"aTargets": [0]
},
{
"bSortable": false, "aTargets": [0]
},
{
"sWidth": "2%",
"aTargets": [0]
}
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var cellContent;
$('td', nRow).each(function (i) {
var colID = aData[indexID];
if (i != 0) {
cellContent = aData[i];

var cellContentSplit = cellContent.split(";#");
if (cellContentSplit.length > 1) {
cellContent = cellContentSplit[1];
}

var lastChar = cellContent.substr(cellContent.length - 1);
if (lastChar == ";") {
cellContent = cellContent.substring(0, cellContent.length - 1);
}

if (i == indexID && hideIdColumn == true && indexID != 1) {
$(this).addClass("hideThis");
}
this.innerHTML = '' + cellContent + '';
}
});
/* Gray font for Is Assistant */
if (listName == "Coordinator") {
if (aData[indexIsAssistant] == "Yes") {
$('td', nRow).addClass('coordinatorAssistant');
}
}
return nRow;
},
"fnFooterCallback": function () {

footerFilters = "";

if (footerSelectCallBack == false) {
// Add Footer Dropdown controls
AddFooterFilter($("#dataTableCustom"), oTable, indexID);
}

$('#dataTableCustom tfoot tr th select').change(function () {
$("#dataTableCustom").dataTable().fnReloadAjax();
footerSelectCallBack = true;
});
},
"fnHeaderCallback": function () {
$('#dataTableCustom thead tr th').click(function () {
if (headerCallback == false) {
$("#dataTableCustom").dataTable().fnReloadAjax();
headerCallback = true;
}
});
}
});
[/code]


thanks for the help.

allan

My guess is that because you are using GET (from $.getJSON) rathe than POST, you will be running into a limit on what your target server allows for the URL length. I'd suggest changing to making a POST request if you can.

Allan

geekinpurpleandpink

Hi Allan,

i tried converting it to POST but I'm getting an error.
I think because the parameter is not properly passed or converted, but I am not sure..
the parameters I'm getting is in this output, unlike the get method the parameters are not parsed properly:

[code]
sEcho=1&iColumns=7&sColumns=&iDisplayStart=0&iDisplayLength=25&mDataProp_0=0&mDataProp_1=1&mDataProp_2=2&mDataProp_3=3&mDataProp_4=4&mDataProp_5=5&mDataProp_6=6&sSearch=&bRegex=false&sSearch_0=&bRegex_0=false&bSearchable_0=true&sSearch_1=&bRegex_1=false&bSearchable_1=true&sSearch_2=&bRegex_2=false&bSearchable_2=true&sSearch_3=&bRegex_3=false&bSearchable_3=true&sSearch_4=&bRegex_4=false&bSearchable_4=true&sSearch_5=&bRegex_5=false&bSearchable_5=true&sSearch_6=&bRegex_6=false&bSearchable_6=true&iSortingCols=1&iSortCol_0=0&sSortDir_0=asc&bSortable_0=false&bSortable_1=true&bSortable_2=true&bSortable_3=true&bSortable_4=true&bSortable_5=true&bSortable_6=true&listName=Procedure&columnNames=ID%2CID%3B%23Title%2CLinkTitle%3B%23Type%2CType%3B%23Status%2CStatus%3B%23Created%2CCreated%3B%23Modified%2CModified%3B%23&SortingDirection=&sortingColumns=&searchText=&manCompanyController=MAN+Truck+%26+Bus&footerFilter=
[/code]


this is the error i'm getting:
The exception message is 'Encountered unexpected character 's'.

[code]
$.ajax({
"type": "POST",
"url": sSource,
"data": aoData,
"dataType": 'json',
"contentType": 'application/json; charset=utf-8',
"success": function (msg) {
var json = $.parseJSON(msg);
fnCallback(json);
},
"error": function (msg) {
alert("AJAX Error: " + msg);
}
});
[/code]

Thanks so much for the help

geekinpurpleandpink

Hi,

I was able to fix it with a little help from friends :) it turns out the format of the aoData posted to the web service does not match.

what we did was we parsed each object and to match the format of the aoData and the web service.

here is the new code: :)

[code]
var aoHash = {};
$.each(aoData, function() {
var item = this;
aoHash[item.name] = item.value;
});

$.ajax({
"type": "POST",
"url": sSource,
"data": JSON.stringify(aoHash),
"dataType": 'json',
"contentType": "application/json",
"success": function (msg) {
var json = $.parseJSON(msg);
fnCallback(json);
},
"error": function (msg) {
alert("AJAX Error: " + msg);
}
});
[/code]

clint

Hi,

I might be having similar issues. I have a webservice that returns json, but I am having issues in getting it to display in the datatable. Would you be willing to post more of your code? Maybe some of your json?

allan

Try running your table through the DataTables debugger and let me know what the debug code is.

Allan

clint

DataTables debugger? I didnt know there was one! Sounds like it would certainly help me.

allan

Underneath the "reply" box for this thread :-) http://debug.datatables.net . Its not really a debugger as such, but it will take a snapshot of your table state and show it visually. Also lets me see what is going on :-)

Allan

clint

That is pretty cool. But it looks like it would capture my data as well? The data is sensitive so I probably cant do that :(. But here is an interesting thing I found in firebug. When I use this code:

[code]
$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxDataProp": "",
"sAjaxSource": "test.aspx/DoProc",
"sServerMethod": "POST",
"bServerSide": true,
"fnServerData": function(sSource, aoData, fnCallBack) {
var aoHash = {};
$.each(aoData, function() {
var item = this;
aoHash[item.name] = item.value;
});

$.ajax({
"type": "POST",
"url": sSource,
"data": JSON.stringify(aoHash),
"contentType": "application/json; charset=utf-8",
"success": function(msg) {
var json = eval(msg);
fnCallBack(json.d);
},
"error": function(msg) {
alert("AJAX Error: " + msg);
}
});
},
"fnServerParams": function(aoData) {
aoData.push({ "name": "procName", "value": "procGetAllContacts" });
aoData.push({ "name": "parmsVals", "value": "" });
aoData.push({ "name": "procType", "value": "Select" });
},
"aoColumns": [
{ "mDataProp": "Code" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
{ "mDataProp": "Initial" },
{ "mDataProp": "Email" },
{ "mDataProp": "JobTitle" },
{ "mDataProp": "SVID" },
{ "mDataProp": "Name" },
{ "mDataProp": "NAMCCode" },
{ "mDataProp": "NAMC" }
]
});
[/code]

I get this error:
aData is undefined
for ( var i=0, iLen=aData.length ; i

clint

Does the json that is passed to _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) need to have start off with {"sEcho": 1, "iTotalRecords": 2, "iTotalDisplayRecords": 2, "aaData": [ ... all my data....?

Could that be my problem? If so, how do I get that info into the json that is returned by my webservice?

allan

> That is pretty cool. But it looks like it would capture my data as well?

Yes it would I'm afraid. It does that, because the data structure is typically integral to debugging errors.

You've aoHash stuff looks a little odd - why is that needed? You should just be able to assign aoData to the 'data' property of the Ajax request. In fact, it looks to me like you shouldn't need to specify fnServerData at all - or is the server doing something odd and encoding the JSON as a string?

Allan