Adding table row data dependant of the server side return

izzy6150

Hi,
I am trying to figure out a way for me to add classes, onclick to table rows that are returned from server-side processing based on values that are returned, also is there a way that i can then hide these irrelevant fields from displaying in the table?

Hope someone can help me.
I need info quick for a project that is to finish by the end of the week.

izzy6150

I found part of my own solution in the fnRowCallback function.
However now I have my required styles in place how do i hide the columns with the processing data?
I can not use the bVisible: false setting because then the data is not available in fnRowCallback, but now these 2 extra columns are being displayed and I don't want them to be seen?

Any help would be really appreciated.

allan

Hi izzy6150,

Good to hear you got the first part sorted. Regarding the hidden columns - I think bVisible is actually the way to go here. The second parameter which is passed to fnRowCallback() is the data array which makes up that row - including hidden columns, so your information should be available there.

Regards,
Allan

izzy6150

That is what I initially thought, but for some reason I am getting javascript errors if i set these last 2 columns as bVisible: false.

here is my code and example ajaxReturn. Just incase I am being stupid and it I am writing something wrong.

Return JSON
[code]
{'iTotalRecords': 164,'iTotalDisplayRecords': 164,'sEcho': '1','iColumns': '7','sColumns': 'EventID,Users,EventName,StartDate,OnlineFront,OnlineBack,Status','iDisplayStart': '0','iDisplayLength': '25','sSearch': '','bEscapeRegex': 'true','sSearch_0': '','bEscapeRegex_0': 'true','sSearch_1': '','bEscapeRegex_1': 'true','sSearch_2': '','bEscapeRegex_2': 'true','sSearch_3': '','bEscapeRegex_3': 'true','sSearch_4': '','bEscapeRegex_4': 'true','sSearch_5': '','bEscapeRegex_5': 'true','sSearch_6': '','bEscapeRegex_6': 'true','iSortingCols': '1','iSortCol_0': '0','iSortDir_0': 'asc','sUserID': 'Izzy','sClientID': 'EventConnections','sAuth': 'Super+User','aaData': [['AC0601','','Accor | Accor conference 06
Offline:The server is curently offline, please try again shortly','14 Dec 06','Off','0','0'],['AC0701','','Accor | March Sales Mission
Offline:The server is curently offline, please try again shortly','26 Mar 07','Off','0','0']]}
[/code]

dataTables Initialization
[code]
//Events Table
var oTable = $('#EventList').dataTable({
"bAutoWidth": false,
"bFilter": true,
"bInfo": true,
"bLengthChange": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"aoColumns": [ {"sName": "EventID"},
{ "sName": "Users",
"sClass": "center",
"sType": "html" ,
"bSearchable": false,
"bSortable": false },
{ "sName": "EventName",
"sType": "html" },
{ "sName": "StartDate",
"sType": "uk_date" },
{ "sName": "OnlineFront",
"sType": "html",
"sClass": "center highlighttext",
"bSearchable": false,
"bSortable": false },
{ "sName": "OnlineBack",
"bSearchable": false,
"bSortable": false,
"bVisible": false },
{ "sName": "Status",
"bSearchable": false,
"bSortable": false,
"bVisible": false}
],
"bServerSide": true,
"sAjaxSource": "AJAX/AJAX_GetEvents.asp",
"fnServerData": function ( sSource, aoData, fnCallback ) {
// Add some extra data to the sender
aoData.push( { 'name': 'sUserID', 'value': '<%=Server.URLEncode(Session("MM_Username"))%>' } );
aoData.push( { 'name': 'sClientID', 'value': '<%=Server.URLEncode(Session("MM_ClientID"))%>' } );
aoData.push( { 'name': 'sAuth', 'value': '<%=Server.URLEncode(Session("MM_UserAuthorization"))%>' } );
$.getJSON( sSource, aoData, fnCallback );
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
var eventClass = 'live';
if ( parseInt(aData[5]) != 1 ) // If Not Online BackOffice
{
if ( parseInt(aData[6]) == 0 ) // If Status = 0
{
eventClass = 'cancelled';
}
else
{
eventClass = 'offline';
}
}

$(nRow).addClass( eventClass );

return nRow;
},
"asStripClasses": [ '' ],
"bStateSave": false,
"iCookieDuration": 60*60*24 /* 1 day */,
"iDisplayLength": 25,
"sDom": '<"top"f>rt<"bottom"pil><"clear">',
"oLanguage": {
"sInfo": "Showing _START_ to _END_ of _TOTAL_"
}
});
[/code]

Error When processing is:
[code]
nTh.parentNode is null
jquery.dataTables.min.js
Line 229
[/code]

I hope this helps to locate what is causing the problem.

Any ideas?

Regards,
Izzy

allan

Hi Izzy,

Given that nTh.parentNode is only used in one location in DataTables, I'm going to guess that you don't have seven TH elements in your thead element. Is that correct? You've got seven defined in the aoColumns initialisation object, and seven returned from the server, so seven is needed in the thead.

Regards,
Allan

izzy6150

Hi Allan,

You are evidently correct. LOL.
Thank you for pointing out my stupidity.

I feel much better now.
dataTables is the best. Dont know what I would have done if it was not available.

Also saw in another post about drag and drop column ordering. I have been working on a plugin for dataTables that uses the JQuery UI Sortable and Draggable to achieve this. Maybe when I have a working model I will post here for comments.

Thanks for all the help.
Regards,
Izzy

allan

Hi Izzy,

Good to hear that works for you.

Yes please do post your column reordering plug-in when you have it available - I'm sure it would be most interesting to others who have been looking for that kind of thing!

Regards,
Allan