DataTables hidden row details example Question

DataTables hidden row details example Question

edited February 2012 in DataTables 1.9 Posts: 4
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
<script type="text/javascript"> /* Formating function for row details */ function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'; sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>'; sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>'; sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>'; sOut += '</table>'; return sOut; } $(document).ready(function() { /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement( 'th' ); var nCloneTd = document.createElement( 'td' ); nCloneTd.innerHTML = '<img src="/images/details_open.png">'; 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 = "<b>"+sReturn+"</b>"+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' ); } } ); } ); </script>
JSON File
$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<intval( $_GET['iSortingCols'] ) ; $i++ ) { if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" ) { $sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]." ".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", "; } } $sOrder = substr_replace( $sOrder, "", -2 ); if ( $sOrder == "ORDER BY" ) { $sOrder = ""; } } /* * Filtering * NOTE this does not match the built-in DataTables filtering which does it * word by word on any field. It's possible to do here, but concerned about efficiency * on very large tables, and MySQL's regex functionality is very limited */ $sWhere = ""; if ( $_GET['sSearch'] != "" ) { $sWhere = "WHERE ("; for ( $i=0 ; $i<count($aColumns) ; $i++ ) { $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR "; } $sWhere = substr_replace( $sWhere, "", -3 ); $sWhere .= ')'; } /* Individual column filtering */ for ( $i=0 ; $i<count($aColumns) ; $i++ ) { if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' ) { if ( $sWhere == "" ) { $sWhere = "WHERE "; } else { $sWhere .= " AND "; } $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' "; } } /* * SQL queries * Get data to display */ $sQuery = " SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))." FROM $sTable $sWhere $sOrder $sLimit "; $rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error()); /* Data set length after filtering */ $sQuery = " SELECT FOUND_ROWS() "; $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error()); $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal); $iFilteredTotal = $aResultFilterTotal[0]; /* Total data set length */ $sQuery = " SELECT COUNT(".$sIndexColumn.") FROM $sTable "; $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error()); $aResultTotal = mysql_fetch_array($rResultTotal); $iTotal = $aResultTotal[0]; /* * Output */ $output = array( "sEcho" => intval($_GET['sEcho']), "iTotalRecords" => $iTotal, "iTotalDisplayRecords" => $iFilteredTotal, "aaData" => array() ); while ( $aRow = mysql_fetch_array( $rResult ) ) { $row = array(); for ( $i=0 ; $i<count($aColumns) ; $i++ ) { /* General output */ $row[] = $aRow[ $aColumns[$i] ]; } $output['aaData'][] = $row; } echo json_encode($output);
THX for the Answer
This discussion has been closed.