86 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
		
		
			
		
	
	
			86 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| 
								 | 
							
								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
							 | 
						||
| 
								 | 
							
								  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
							 | 
						||
| 
								 | 
							
								<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
							 | 
						||
| 
								 | 
							
								<head>
							 | 
						||
| 
								 | 
							
									<title>jQuery plugin: Tablesorter 2.0 - Dealing with markup inside cells</title>
							 | 
						||
| 
								 | 
							
									<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
							 | 
						||
| 
								 | 
							
									<link rel="stylesheet" href="../themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="../jquery-latest.js"></script>
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="../jquery.tablesorter.js"></script>
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="../addons/pager/jquery.tablesorter.pager.js"></script>
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="js/chili/chili-1.8b.js"></script>
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="js/docs.js"></script>
							 | 
						||
| 
								 | 
							
									<script type="text/javascript" src="js/examples.js"></script>
							 | 
						||
| 
								 | 
							
								<script type="text/javascript" id="js">$(document).ready(function() {
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									// call the tablesorter plugin
							 | 
						||
| 
								 | 
							
									$("table").tablesorter({
							 | 
						||
| 
								 | 
							
										// define a custom text extraction function
							 | 
						||
| 
								 | 
							
										textExtraction: function(node) {
							 | 
						||
| 
								 | 
							
											// extract data from markup and return it 
							 | 
						||
| 
								 | 
							
											return node.childNodes[0].childNodes[0].innerHTML;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									});
							 | 
						||
| 
								 | 
							
								}); </script>
							 | 
						||
| 
								 | 
							
								</head>
							 | 
						||
| 
								 | 
							
								<body>
							 | 
						||
| 
								 | 
							
								<div id="banner">	
							 | 
						||
| 
								 | 
							
									<h1>table<em>sorter</em></h1>
							 | 
						||
| 
								 | 
							
									<h2>Dealing with markup inside cells</h2>
							 | 
						||
| 
								 | 
							
									<h3>Flexible client-side table sorting</h3>
							 | 
						||
| 
								 | 
							
									<a href="index.html">Back to documentation</a>
							 | 
						||
| 
								 | 
							
								</div>
							 | 
						||
| 
								 | 
							
								<div id="main">
							 | 
						||
| 
								 | 
							
									<h1>Demo</h1>
							 | 
						||
| 
								 | 
							
									<div id="demo">
							 | 
						||
| 
								 | 
							
										<table cellspacing="1" class="tablesorter">
							 | 
						||
| 
								 | 
							
												<thead>
							 | 
						||
| 
								 | 
							
											<tr>
							 | 
						||
| 
								 | 
							
												<th>First Name</th>
							 | 
						||
| 
								 | 
							
												<th>Last Name</th>
							 | 
						||
| 
								 | 
							
												<th>Age</th>
							 | 
						||
| 
								 | 
							
												<th>Total</th>
							 | 
						||
| 
								 | 
							
												<th>Discount</th>
							 | 
						||
| 
								 | 
							
												<th>Date</th>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											</tr>
							 | 
						||
| 
								 | 
							
										</thead>
							 | 
						||
| 
								 | 
							
										<tbody>
							 | 
						||
| 
								 | 
							
											<tr>
							 | 
						||
| 
								 | 
							
												<td><strong><em>Peter</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>Parker</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>28</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>$9.99</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>20%</em></strong></td>	
							 | 
						||
| 
								 | 
							
												<td><strong><em>Jul 6, 2006 8:14 AM</em></strong></td>
							 | 
						||
| 
								 | 
							
											</tr>
							 | 
						||
| 
								 | 
							
											<tr>
							 | 
						||
| 
								 | 
							
												<td><strong><em>John</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>Hood</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>33</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>$19.99</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>25%</em></strong></td>
							 | 
						||
| 
								 | 
							
												<td><strong><em>Dec 10, 2002 5:14 AM</em></strong></td>
							 | 
						||
| 
								 | 
							
											</tr>
							 | 
						||
| 
								 | 
							
										</tbody>
							 | 
						||
| 
								 | 
							
										</table>
							 | 
						||
| 
								 | 
							
									</div>
							 | 
						||
| 
								 | 
							
									<h1>Javascript</h1>
							 | 
						||
| 
								 | 
							
									<div id="javascript">
							 | 
						||
| 
								 | 
							
										<pre class="javascript"></pre>
							 | 
						||
| 
								 | 
							
									</div>
							 | 
						||
| 
								 | 
							
									<h1>HTML</h1>
							 | 
						||
| 
								 | 
							
									<div id="html">
							 | 
						||
| 
								 | 
							
										<pre class="html"></pre>
							 | 
						||
| 
								 | 
							
									</div>
							 | 
						||
| 
								 | 
							
								</div>
							 | 
						||
| 
								 | 
							
								<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
							 | 
						||
| 
								 | 
							
								<script type="text/javascript">
							 | 
						||
| 
								 | 
							
								_uacct = "UA-2189649-2";
							 | 
						||
| 
								 | 
							
								urchinTracker();
							 | 
						||
| 
								 | 
							
								</script>
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								</html>
							 | 
						||
| 
								 | 
							
								
							 |