Server Side Processing + Show/ Hide
Server Side Processing + Show/ Hide
ESHam
Posts: 14Questions: 0Answers: 0
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]
[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]
This discussion has been closed.
Replies
Allan
You can view my table via http://207.38.165.173:5555/flatlap/accountsTest.php
Thanks for the help in advance.
It should be up now.
The table body as 6 columns
The Ajax data arrays for each row has 5 elements
They should all match. Which one is correct?
As for the Ajax, i will be returning additional columns to be viewed when the details icon on the first row is opened.
Allan
this is what i have for columns
[code]
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
[/code]
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]
However, if you have 6 columns and want 6 columns, why are there only 5 in your aoColumns array?
Allan
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.
[code]
$row[] = '';
[/code]
Thank you so much for your help.. i am sure i will be back here very soon with another newbie question :) .