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

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.