DataTables hidden row details example Question
DataTables hidden row details example Question
rbts
Posts: 4Questions: 0Answers: 0
I have this Code :
My question is:
Why not here, he shows me the column with the graphics and gives me the opportunity to display details?
HTML
[code]
/* Formating function for row details */
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
*/
oTable = $('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": "/jsonscripts/cardlist.php",
"fnServerData": function( sUrl, aData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aData,
"success": fnCallback,
"dataType": "json",
"cache": false
} ) ;
},
"aoColumns": [
{
"sTitle": "Kartenname",
"sClass": "left",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn > '' ) {
sReturn = ""+sReturn+""+obj.aData[ 10 ];
}
return sReturn;
}
},
{ "sTitle": "Dollar" },
{ "sTitle": "Gruppe" },
{ "sTitle": "Besucher" },
{ "sTitle": "Zuchterfolg" },
{ "sTitle": "Teile" },
{ "sTitle": "Selten" },
{ "sTitle": "Vorhanden" }
],
"aaSorting": [[1, 'asc']]
});
/* 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).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]
JSON File
[code]
$aColumns = array( 'cardname', 'zoodolar', 'gruppe', 'besucher', 'zuchterfolg', 'teile', 'seltenheit', 'system', 'bild', 'diamanten', 'id');
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "vms_cards";
/* Database connection information */
$gaSql['user'] = $db_user;
$gaSql['password'] = $db_pass;
$gaSql['db'] = $db_base;
$gaSql['server'] = $db_host;
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
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
My question is:
Why not here, he shows me the column with the graphics and gives me the opportunity to display details?
HTML
[code]
/* Formating function for row details */
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
*/
oTable = $('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": "/jsonscripts/cardlist.php",
"fnServerData": function( sUrl, aData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aData,
"success": fnCallback,
"dataType": "json",
"cache": false
} ) ;
},
"aoColumns": [
{
"sTitle": "Kartenname",
"sClass": "left",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn > '' ) {
sReturn = ""+sReturn+""+obj.aData[ 10 ];
}
return sReturn;
}
},
{ "sTitle": "Dollar" },
{ "sTitle": "Gruppe" },
{ "sTitle": "Besucher" },
{ "sTitle": "Zuchterfolg" },
{ "sTitle": "Teile" },
{ "sTitle": "Selten" },
{ "sTitle": "Vorhanden" }
],
"aaSorting": [[1, 'asc']]
});
/* 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).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]
JSON File
[code]
$aColumns = array( 'cardname', 'zoodolar', 'gruppe', 'besucher', 'zuchterfolg', 'teile', 'seltenheit', 'system', 'bild', 'diamanten', 'id');
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "vms_cards";
/* Database connection information */
$gaSql['user'] = $db_user;
$gaSql['password'] = $db_pass;
$gaSql['db'] = $db_base;
$gaSql['server'] = $db_host;
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
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
This discussion has been closed.
Replies
Thx
http://www.datatables.net/release-datatables/examples/server_side/row_details.html