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

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.