DataTables

dbradley

Hi!

I use the following function to open and close an extra information row on specific rows in my table ("thisTable"). The fnOpen part of the code works fine, but fnClose does nothing and I end up only being able to open more and more lines. The icon I use changes so the if statement is definately fine, I can use fnDeleteRow successfully but for some reason that deletes EVERY currently open info row. Any ideas would be msot appreciated!

Thanks!
Daniel


jQuery("#noteControl").live('click',function(){
    
    if(jQuery(this).attr('src').match("plus_green"))
    {
	currentRow = jQuery(this).closest("tr");
	currentRow = jQuery(this).parent().parent();
	jQuery(this).attr({'src' : '/media/minus_red.png'});
	thisTable.fnOpen(currentRow, "allsorts!",'details');
    
    }else
    {
	currentRow = jQuery(this).parent().parent();
	jQuery(this).attr({'src' : '/media/plus_green.png'});
	thisTable.fnClose(currentRow);    
    }

"

allan

Hi Daniel,

Without knowing the structure of your html, I can only guess at what is going on - and I'd guess that 'currentRow' is not the 'opened' row. It would be a good idea to put some debug information into your script there, to see exactly what currentRow is. Also, is there really going to be one element with the id of 'noteControl'? If there are more (which it looks like there might be) then that could mess things up a bit.

Also, you might find this example interesting: http://datatables.net/examples/api/row_details.html

Regards,
Allan

ChrisS

Hi Daniel, hi Allan,

i first stuck on the same issue. The solution was quite simple, but not well documented, so I had to search an try a little bit. (As a non JS expert!!! ;-)

In row 08 in the above listing there is the class 'details'. But the button names are different. In my experience with that issue, the button names have to begin with the classname. Maybe I'm wrong but renaming the classes to the button names worked out for me. Here ist my listing:

  $('td img', oTable.fnGetNodes() ).each( function () {
    $(this).click( function () {
      var nTr = this.parentNode.parentNode;
      if ( this.src.match('icon_minus') )
      {
        /* This row is already open - close it */
        this.src = "./custom/layout/images/icons/icon_plus.gif";
        oTable.fnClose( nTr );
      }
      else
      {
        /* Open this row */
        this.src = "./custom/layout/images/icons/icon_minus.gif";
        oTable.fnOpen( nTr, fnFormatDetails(nTr), 'icon' );
      }
    } );
  } );

Maybe that helps a little.

Regards,
Chris

allan

Hi Chris,

Superb! Thanks very much for your code. I suspect I'll be linking to your post in future in the forum :-)

Regards,
Allan

dokeeffe

I dont have an image to click on to open the row (just click anywhere on the row) so I used jquery to remove the expanded row (.remove()). Seems to work ok so far.

$('#mainTable tbody tr').live( 'click', function () {
    		var nTr = this;
    		if ( $(this).hasClass('highlighted') )
    		{
    			/* This row is already open - close it */
    			//oTable.fnClose( this ); //not working
                        $(this).next().remove();
                        $(this).removeClass('highlighted')
    		}
    		else
    		{
    			/* Open this row */
    			$(this).addClass('highlighted')
    			oTable.fnOpen( nTr, fnFormatDetails(nTr), 'listingDetails opened' );
    		}
    	} );

IanEpperson

In my implementation, a table is shown on the expanded row. I wanted the user to be able to click the row, so tried the code that @dokeeffe shared. First, after expanding then closing the row then performing a search or sort, all rows once expanded would expand again. Commenting in the "not working" line and removing the #(this).next().remove(); fixed that.

My expanded row contains a table, and that code tries to run when a user clicks one of those rows as well. To fix that, I added a check after /* Open this row */ to ensure we are operating on a DataTables row:

//Show-hide extra row info
     $('#example tbody tr').live( 'click', function () {
           var nTr = this;
           if ( $(this).hasClass('highlighted') )
           {
               /* This row is already open - close it */
               oTable.fnClose( this );
               $(this).removeClass('highlighted')
           }
           else
           {
              /* Open this row, if it's classy enough */
              if ( oTable.fnGetData( nTr ) == null ) return;
              $(this).addClass('highlighted')
              oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'listingDetails opened' );
           }
       } );

snooppy

I have the same problem as dbradley. fnClose doesn't work for server-side. Maybe it related from dataTable version(I'm using 1.6.2). I found another way of deleting "detail" row in examples for dataTables-1.5:

            var nRemove = $j(nTr).next()[0];
            nRemove.parentNode.removeChild( nRemove );

allan

It is possible that there is a bug in 1.6.2 - that's a really old version now, and I'm afraid I can't remember off the top of my head if that's something I've fixed.

This example shows 1.9.2 working with fnClose and server-side processing: http://datatables.net/release-datatables/examples/server_side/row_details.html

Allan

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion