Server Side Processing + Show/ Hide

ESHam

Hello I am trying to get show hide to work with server side. I get "Requested Unknown Parameter".
[code]
<?php

$aColumns = array( 'accountid', 'accountname', 'accountAddress1', 'accountphone', 'accountemail');

$sIndexColumn = "accountname";

/* DB table to use */
$sTable = "accounts";

/* Database connection information */
$gaSql['user'] = "XX";
$gaSql['password'] = "";
$gaSql['db'] = "XX";
$gaSql['server'] = "XX";

/* Local functions*/

function fatal_error ( $sErrorMessage = '' )
{
header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
die( $sErrorMessage );
}
/*
* MySQL connection
*/
if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) )
{
fatal_error( 'Could not open connection to server' );
}

if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
{
fatal_error( 'Could not select database ' );
}


/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
intval( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i $iFilteredTotal,
"aaData" => array()
);

while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();

for ( $i=0 ; $i
[/code]
My HTML
[code]




Rendering engine
Browser
Platform(s)
Engine version
CSS grade




Loading data from server





Rendering engine
Browser
Platform(s)
Engine version
CSS grade




[/code]
Finally My Script:
[code]

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "CJS/Myjson.php",

"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],

});

$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "assets/advanced-datatable/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "assets/advanced-datatable/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );

[/code]

allan

Please link to a test page, showing the issue as noted in the forum rules: http://datatables.net/forums/discussion/12899

Allan

ESHam

Alan, I am new to coding.. but i saved a test page on http://live.datatables.net/apasez/2/edit#javascript,html

allan

I'm getting errors on the page I'm afraid: ReferenceError:` Can't find variable: $` for example. Can you link me to the page you are working on, or one with the required resources included.

ESHam

Allan, Thanks for getting back.
You can view my table via http://207.38.165.173:5555/flatlap/accountsTest.php

Thanks for the help in advance.

allan

Sorry - my browser says that the server is not available. Is it online at the moment?

ESHam

Allan,
It should be up now.

allan

The table header has 7 columns
The table body as 6 columns
The Ajax data arrays for each row has 5 elements

They should all match. Which one is correct?

ESHam

i want the header to have 6 columns.. same thing for the body.
As for the Ajax, i will be returning additional columns to be viewed when the details icon on the first row is opened.

allan

Excellent - I'd suggest making those modifications then :-). Just have 6 columns in the header and use mData / mRender in aoColumns to tell DataTables what data to show for each column.

Allan

ESHam

Allan, I am not sure where you see the header 7 Columns..
this is what i have for columns
[code]



Rendering engine
Browser
Platform(s)
Engine version
CSS grade



[/code]

ESHam

Allan.
I changed the script to the one below, i am now getting the extra column for the details but the page merges to the left and leaves the last defined column empty, and no details on the first column.
[code]
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "CJS/accountsjson.php",
"aoColumns": [
{ "mData": "0" },
{ "mData": "1" },
{ "mData": "2" },
{ "mData": "3" },
{ "mData": "4" }
]

});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "assets/advanced-datatable/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "assets/advanced-datatable/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );

[/code]

allan

Server is offline again.

However, if you have 6 columns and want 6 columns, why are there only 5 in your aoColumns array?

Allan

ESHam

I would like the table to return 5 columns.. and the extra column is created automatically to include the details (+) which drop downs to another table.

ESHam

Allan, I am sorry to keep bothering you. but this is driving me crazy..
i was able to have the details icon show up on the first column briefly until i hit ok on (Requested Unknown parameter 5) i only see 5 Header in my table, and returning 5 objects from the array.. how do i go about adding the details column that opens the drop down table. Let me know what you think.

ESHam

Thanks.. i was able to solve it by inserting an extra column in the array
[code]
$row[] = '';
[/code]

Thank you so much for your help.. i am sure i will be back here very soon with another newbie question :) .