I have used the free applications jquery Tablesorter and jquery DataTables and am open to alternative ideas, but I really like the layout of both of these programs. I just need help in finishing this. This has been a HUGE problem for me, so I will be very thankful to anyone who can help me out.


jquery DataTables
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/jquery.dataTables.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" src="res/csvToTable.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
	$('#CSVTable').CSVToTable('data/orders.csv', {  
			loadingImage: 'res/theme/loading.gif',  
			startLine: 1, 
			tableClass: "dataTable",
			headers: ['name', 'number', 'product', 'order']
		}).bind("loadComplete",function() { 
			$("#CSVTable .dataTable tr").each(function(i,row) { 
				var column = (i>0)?"<td><input type='checkbox' class='removeRow' /></td>":"<th>&nbsp;</th>";
				$(this).prepend(column);
			});
			$("input:checkbox.removeRow").bind("click", function(){ 
				$(this).closest("tr").remove();
	$('#CSVTable').dataTable( { 
"bProcessing": true, 
"bDeferRender": true
} );			
});
		});
	});  
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				DataTables base example
			</div>
			
			<h1>Live example</h1>
			<div id="demo">
<div id="CSVTable">
	</body>
</html>


jquery Tablesorter
Code:
<!-- The above line is necessary to allow local JavaScript --!>
<!DOCTYPE html>
<html>





<head>
<title>Workable: All</title>
<link rel="stylesheet" href="res/default.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="res/theme/style.css" type="text/css" media="print, projection, screen" />

<script type="text/javascript" src="res/jquery-1.7.2.js"></script>
<script type="text/javascript" src="res/csvToTable.js"></script>
<script type="text/javascript" src="res/tablesort.min.js"></script>
<script type="text/javascript" src="res/tablesort.ie.js"></script>
<script type="text/javascript">
	$(function() {
		$('#CSVTable').CSVToTable('data/test.csv', {  
	       		loadingImage: 'res/theme/loading.gif',  
			startLine: 1, 
			tableClass: "tablesorter",
			headers: ['Album Title', 'Artist Name', 'Price ($USD)'] 
		})}).bind("loadComplete",function() { $('#CSVTable').find('TABLE').tablesorter({sortList:[[3,0],[9,0]], widgets: ['zebra']}); 
	});
	$("tr input:checkbox").live("click", function(){ $(this).closest("tr").remove() });
</script>
</head>
<body>
<div id="banner">	
	<h1>Book Report</em></h1>
	<h2>Wednesday, August 22, 2012</h2>
	<h3>Love books, Love Life</h3>
	<a href="#"></a>
</div>

<table id="nav" class="nav" border="0" cellpadding="0" cellspacing="1" width="100%">
<thead></thead>
<tbody>
<tr>
	<td>
	<p>
	  <a href="teamview.html">Overview</a> | 
	  <a href="index.html">Main</a> |
	  <a href="all.html">All</a> |
	  <a href="cit.html">Tasks</a> |
	  <a href="ag.html">Other 1</a> |
	  <a href="daar.html">Other 2</a> |
	</td>
	<td>
	<p> DNR Orders  |  Inactive Orders  |  Total Orders </p>
	</td>
	<td align="right">
		</td>
</tr>
</tbody>
</table>

</br>

<a name="gene"></a>
<h1>All</h1>
<div id="CSVTable">

</div>


</body>
</html>