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
<!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> </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
<!-- 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>