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


Reply With Quote



Bookmarks