DataTables logo DataTables

fnOpenClose > fnFormatDetails load() external content into div
  • Hi,

    I´m having a datatable with detaildata that is shown via fnOpenClose.
    I need a possibility to load external content as detaildata just on click demand from the database with an ajax function like load().
    I tried with creating an div and loading into, but this is not working:
    function fnFormatDetails (nTr) {
    	var iIndex=oTable.fnGetPosition( nTr );
    	var aData=oTable.fnSettings().aoData[iIndex]._aData;
    	var sOut = '<div id="detail'+aData[1]+'"><img src="/img/indicator.gif" title="Loading data"></div>';
    	$("#detail"+aData[1]).load("/detail.php?id="+aData[1]);
    	return sOut;
    }
    
    /* Event handler function */
    function fnOpenClose (oSettings) {
    	$("td img.openclose", oTable.fnGetNodes()).each(function () {
    		$(this).click(function () {
    			var nTr=this.parentNode.parentNode;
    			if(this.src.match('details_close')) {
    				/* This row is already open - close it */
    				this.src="/img/tables/details_open.png";
    				this.title="details";
    				/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
    				var nRemove=$(nTr).next()[0];
    				nRemove.parentNode.removeChild(nRemove);
    			}
    			else if(this.src.match('details_open')) {
    				/* Open this row */
    				this.src="/img/tables/details_close.png";
    				this.title="close details";
    				oTable.fnOpen(nTr,fnFormatDetails(nTr),'.');
    			}
    		});
    	});
    
    I tried to find info about this in the forum and I thought I read about sometime in the past. But I couldn´t find actually...
    Is there any chance to load() external detail info with fnOpenClose?

    Regards
    achlan
  • ....I try for a week a solution to this problem! but it seems that there is no way out ....

    :(
  • I may have found a way ...

    function fnFormatDetails ( nTr )
    	{
    		var aData = Table_list_project.fnGetData( nTr );
    		var id_progetto=aData[1]; // table -> first column value
    		 $.ajax({ 
    			type:"POST",
    			url: 'includes/__ajax_gear/_get_details_progetti.php', 
    			cache: false,
    			data:'id_proj='+id_progetto,
    			success: function(msg)
    			{ 
    				Table_list_project.fnOpen( nTr, msg, 'details' );
    			}
    		});
    		return '';
    	}
    

    then OpenClose ....

    /* Event handler function */
    	function fnOpenClose ( oSettings )
    	{
    		 $('td img', Table_list_project.fnGetNodes() ).each( function () {
    			$(this).click( function () {
    				var nTr = this.parentNode.parentNode;
    				if ( this.src.match('details_open') )
    				{
    					// This row is already open - close it
    					this.src = "images/icons/details_close.png";
    					// fnClose doesn't do anything for server-side processing - do it ourselves :-)
    					var nRemove = $(nTr).next()[0];
    					nRemove.parentNode.removeChild( nRemove );
    				}
    				else
    				{
    					// Open this row 
    					this.src = "images/icons/details_open.png";
    					Table_list_project.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
    				}
    			} );
    		} );
    	}
    

    ... in dataTable settings

    .
    .
    .
    ,
    "fnDrawCallback": fnOpenClose,
    .
    .
    .
    

    ... remains a small problem :( during the closing table hangs a few pixels high that contains the function return value fnFormatDetails !

    paky
  • Hi paky,

    great. it just works!
    I use it like this:
    function fnFormatDetails ( nTr ) {
    		var iIndex = oTable.fnGetPosition( nTr );
    		var aData = oTable.fnSettings().aoData[iIndex]._aData;
    		 $.ajax({ 
    			type: "POST",
    			url: "detail.php", 
    			cache: false,
    			data:'w='+aData[1],
    			success: function(msg) { 
    				oTable.fnOpen( nTr, msg, 'details' );
    			}
    		});
    		return "";
    	}
    
    I´m having no problems/bugs with this
    thanks for your code!

    Regards,
    achlan.
  • Great :) my bugs/problems is a empty table after the closing !!! Maybe css solution ?!

    achlan your table (of details) is grey border-color ?

    Hi and thanks for suggestion to psjandhyala ;)
  • do you mean a table inside the ajax loaded detail.php?
    I don´t have a table in there. I´ll build an jqueryui accordeon to load different separate new data in this area on click.
    I´m having absolutely no problems by closing the detail view. maybe you should try it for testing with a blank detail php page without css?
  • mmm.... my problem is on return of fnFormatDetails().

    Now return blank value...

    If I set :
    function fnFormatDetails ( nTr ) {
    		var iIndex = oTable.fnGetPosition( nTr );
    		var aData = oTable.fnSettings().aoData[iIndex]._aData;
    		 $.ajax({ 
    			type: "POST",
    			url: "detail.php", 
    			cache: false,
    			data:'w='+aData[1],
    			success: function(msg) { 
    				oTable.fnOpen( nTr, msg, 'details' );
    			}
    		});
    		return 'hello world';
    	}
    


    after close details remains open table a second <table> with 'Hello world' inside !
    The first <table> works fine !!!!
  • I just have some other nice effects...
    when I open a detail view, the navigation paging shows only the same page number by clicking to another page. I can navigate to the next page, but the "active" number is still the same.
    And when I jump to the first page, some random detail views are opened automatically. really strange...
  • Firefox error console says:
    Error: jQuery.fn.dataTableExt is undefined
    in: ......./jquery/jquery.dataTables.js
    row: 482

    Something disturbes parts of the main functionality of datatables...

    This Message is thrown by clicking the navigation
This discussion has been closed.
All Discussions