DataTables logo DataTables

DataTables hidden row details example Question
  • 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.
All Discussions