Show/Hide Details Not Working

schenkkp

I am trying to use the show/hide details example on this website: http://datatables.net/examples/server_side/row_details.html

I keep getting an error stating "DataTables warning (table id = 'tours'): Added data does not match known number of columns". I try looking for an uneven number of columns, but cannot find any. (All area of code have 16 columns)

In order to set up show/hide, do I have to edit my process PHP file? Also in the PHP file, am I setting up the non-database field correctly (see comment in PHP code)? Any ideas on why I'm receiving this error? I'm a beginner at this. Thanks for your help in advance!

HTML Table:
[code]



ID
Type
Date
# Guests
Contact
Title
Group Name
Email
Phone
Address
City
State
Zip Code
Reason for Visiting
Comments




Loading data from server


[/code]

Javascript/jQuery:
[code]$(document).ready(function() {
var oTable = $('#tours').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/vic/sandbox/access/tours/tour-table-process.php",
"sScrollX": "944px",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"aoColumns": [
/* icon */ { "bSearchable": false },
/* id */ { "bVisible": false, "bSearchable": false },
/* tour_type */ null,
/* date */ null,
/* numGuests */ null,
/* name */ null,
/* title */ { "bVisible": false },
/* group_name */ null,
/* email */ { "bVisible": false },
/* phone */ { "bVisible": false },
/* address */ { "bVisible": false },
/* city */ { "bVisible": false },
/* state */ { "bVisible": false },
/* zip_code */ { "bVisible": false },
/* reason */ { "bVisible": false },
/* comments */ { "bVisible": false }
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": fnOpenClose
})
});

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/vic/sandbox/_images/datatable/details_open.png";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "/vic/sandbox/_images/datatable/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}[/code]

PHP:
[code]/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array(' ', 'id', 'tour_type', 'date', 'num_of_guests', 'name', 'title', 'group_name', 'email', 'phone','address','city','state','zip_code','reason','comments');[/code]

allan

What does the json return from the server look like? Is there perhaps a trailing comma or something?

Allan

schenkkp

Hi Allan! I can't find a trailing comma. Maybe you can...

Here is what the json returns:
[code]{"sEcho": 0, "iTotalRecords": 24, "iTotalDisplayRecords": 24, "aaData": [ ["106","School Visit","2010/10/22 9:15 AM","14","John","","ajfdl;kj","abc@abc.com","asdfkjl;","asdf;ljk","sajfl;","AZ","29202","I love campus!",""],["105","General","2010/09/10 10:00 AM","2","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","ajskdl","IN","29202","",""],["104","School Visit","2010/11/05 9:15 AM","20","John Smith","CEO","Eddia","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","I need a riding tour for the tour date."],["103","General","2010/09/07 10:00 AM","1","mk","","","","","test","tte","IN","49085","just a test to test it out. :-)","None"],["102","Large Group","2010/10/07 12:00 AM","12","John Smith","CEO","Americorp","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","My company likes the campus a lot.",""],["101","General","2010/09/02 10:00 AM","1","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","",""],["99","General","2010/09/03 2:00 PM","2","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","I love campus!",""],["100","General","2010/09/02 2:00 PM","1","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","Campus.",""],["98","Large Group","2010/10/06 12:00 AM","12","John Smith","","Retters","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","I need a wheelchair for my mother."],["97","Large Group","2010/10/06 12:00 AM","12","John Smith","","Retters","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","I need a wheelchair for my mother."],["95","General","2010/09/09 10:00 AM","2","me","","","abc@abc.com","943-345-2236","test","asdf","IN","04920","",""],["96","General","2010/09/03 10:00 AM","1","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","I need a wheelchair."],["93","School Visit","2011/04/05 9:15 AM","12","John Smith","Teacher","Company","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","Love the campus!",""],["94","School Visit","2011/04/05 9:15 AM","12","John Smith","Teacher","Company","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","Love the campus!",""],["91","General","2010/11/03 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","",""],["92","School Visit","2010/10/01 10:00 AM","12","John Smith","Teacher","Lighthouse Charter","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","",""],["87","General","2010/09/15 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","Love"],["88","General","2010/09/15 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","Love"],["86","General","2010/09/15 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","Love"],["85","General","2010/09/15 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","Love"],["84","General","2010/09/15 10:00 AM","3","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","","Love"],["83","General","2010/09/02 2:00 PM","4","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","",""],["82","Prospective Graduate","2010/09/02 2:00 PM","4","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","The campus.",""],["81","General","2010/09/02 10:00 AM","9","John Smith","","","abc@abc.com","983-304-4022","123 Main Street","Floydville","IN","29202","The campus.",""]] }[/code]

allan

No the json output looks fine - however, the sEcho parameter does not :-). It should never be zero - and should increment by one for every draw that DataTables does. It must be the same as the 'sEcho' parameter that DataTables sends to the server-side (i.e. just echo it back) - although cast it as an int for security reasons. http://datatables.net/usage/server-side

Allan

schenkkp

I'm sorry...I gave you the wrong output. The sEcho parameter is defined (>0). Any other ideas? If not, I might just give up or try again. Thanks for your help!

allan

If sEcho is being returned as DataTables sends it (not just a static 0 or 1 or whatever) then the above looks fine. I don't see any other problem. Perhaps you could link us to an example?

Allan