Jquery Plugin: Detailsrow - easily show more info in your data tables

Author: Philip Floetotto
Version: 1.1
Download: jquery.detailsRow.js (3 kb)
Note: Internet Explorer bug fixed thanks to Sebastien Creme

Introduction

You often find yourself short off valuable screenspace and your users ask for just that little more information on the data rows in your table. Being forced to create these "toggle detailed rows" for clients quite often I decided to use a little Jquery magic to add these rows automatically for me. The data is retrieved using ajax. You can define an html attribute in the table row, for example the id, which will be passed through to the URL in the POST variables.

The plugin should be very easy to configure. Please have a look at the following example to get an idea about how it works.

Example - using basic ajax to retrieve info

In this simple example we use we retrieve data using the id Attribute in the TR Element. The information is send to process.php where it is processed and returns data depending on which id has been passed. If no id was passed, we return sample data.

First Name	Last Name	Age	Total	Discount	Difference	Date
Bruce	Almighty	45	$153.19	44.7%	+77	Jan 18, 2001 9:12 AM
Bruce	Evans	22	$13.19	11%	-100.9	Jan 18, 2007 9:12 AM
Clark	Kent	18	$15.89	44%	-26	Jan 12, 2003 11:14 AM
John	Hood	33	$19.99	25%	+12	Dec 10, 2002 5:14 AM
Peter	Parker	28	$9.99	20.9%	+12.1	Jul 6, 2006 8:14 AM


	DEFINING THE ID IN THE TR ELEMENT:
	
	<tr class="even" id="1">
		<td>Bruce</td>
		<td>Almighty</td>
		<td>45</td>
		<td>$153.19</td>
		<td>44.7%</td>
		<td>+77</td>
		<td>Jan 18, 2001 9:12 AM</td>
	</tr>
	<tr class="odd" id="2">
		<td>Bruce</td>
		<td>Evans</td>
		<td>22</td>
		<td>$13.19</td>
		<td>11%</td>
		<td>-100.9</td>
		<td>Jan 18, 2007 9:12 AM</td>
	</tr>
	
	$(document).ready(function() {
		$('#table1').detailsRow('process.php',{data:{"id":"id"}});
	});

Example - using the url attribute to retrieve data (combined with jQuery Tablesorter)

Instead of using just one url and post parameters, we can set a specific URL in the url attribute of the TR element. NOTE - you can mix the two methods as you can observe in this example.

NOTICE - use the settings.reload to remove the details row when hiding so the sorting works again. Sorting with a visible detailsRow causes the plugin to break! You need to attach a sortStart function to the table sorter to trigger the onclick of any open rows as well. Please have a look at the code below!

First Name	Last Name	Age	Total	Discount	Difference	Date
Bruce	Almighty	45	$153.19	44.7%	+77	Jan 18, 2001 9:12 AM
Bruce	Evans	22	$13.19	11%	-100.9	Jan 18, 2007 9:12 AM
Clark	Kent	18	$15.89	44%	-26	Jan 12, 2003 11:14 AM
John	Hood	33	$19.99	25%	+12	Dec 10, 2002 5:14 AM
Peter	Parker	28	$9.99	20.9%	+12.1	Jul 6, 2006 8:14 AM


	<tr class="odd" url="data.html">
		<td>John</td>
		<td>Hood</td>
		<td>33</td>
		<td>$19.99</td>
		<td>25%</td>
		<td>+12</td>
		<td>Dec 10, 2002 5:14 AM</td>
	</tr>
	
	$(document).ready(function() {
		$('#table2').detailsRow('process.php',{data:{"id":"id"},reload:true});
		$("#table2").bind("sortStart",function() { 
	        	$('td[state=open]').click(); 
	    	}); 
	});

Grabbing the ID on the Backend (PHP)

Several of you have asked me how to access the ID which is being passed. Here is what happens in process.php:


	switch ($HTTP_POST_VARS['id']) {
		case 1:
			echo "data for ID 1 ...";
		break;
		case 2:
			echo "data for ID 2 ...";
		break;
		case 3:
			echo "data for ID 3 ...";
		break;
		default:
			echo "No id was found and therefore no data";
	}

Known Issues

When sorting after a details row has been opened, the order is messed up. Have to remove all detailsRow from DOM when doing so or something... Don't know yet.

Please feel free to send me feedback and suggestions to mmeier23@gmail.com