Create a sortable table with multi-column sorting capabilities.
A simple Table Sorter.
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:
tablesorter works on standard HTML, Php Tables tables. You must include THEAD and TBODY tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});
</script>
<style>
th.headerSortUp {
background:#F00;
background-color: #F00;
}
th.headerSortDown {
background:#0C0;
background-color: #0C0;
}
</style>
</head>
<body>
<!-- <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
--><script src="jquery.tablesorter.js"></script>
<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Sr.</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<script language="javascript">
var i=0;
var j=11;
while(i<=10){
document.write("<tr><td>"+i+"</td><td>Parker</td><td>"+j+"</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td> </tr>");
i++ ;
j++ ;
}
</script>
</tbody>
</table>
</body>
</html>
Click on Table Heading and show ascending and descending.
if you Like this code then Please do the comments
- Multi-column sorting
- Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.
- Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via
- Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Small code size
<head> tag of your HTML document: tablesorter works on standard HTML, Php Tables tables. You must include THEAD and TBODY tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});
</script>
<style>
th.headerSortUp {
background:#F00;
background-color: #F00;
}
th.headerSortDown {
background:#0C0;
background-color: #0C0;
}
</style>
</head>
<body>
<!-- <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
--><script src="jquery.tablesorter.js"></script>
<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Sr.</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<script language="javascript">
var i=0;
var j=11;
while(i<=10){
document.write("<tr><td>"+i+"</td><td>Parker</td><td>"+j+"</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td> </tr>");
i++ ;
j++ ;
}
</script>
</tbody>
</table>
</body>
</html>
Click on Table Heading and show ascending and descending.
if you Like this code then Please do the comments
No comments:
Post a Comment