Sortable Table

<XMP><body> <script type="text/javascript"> //OwnerIQ var __oiq_pct = 50; if( __oiq_pct>=100 || Math.floor(Math.random()*100/(100-__oiq_pct)) > 0 ) { var _oiqq = _oiqq || []; _oiqq.push(['oiq_addPageBrand','Lycos']); _oiqq.push(['oiq_addPageCat','Internet > Websites']); _oiqq.push(['oiq_addPageLifecycle','Intend']); _oiqq.push(['oiq_doTag']); (function() { var oiq = document.createElement('script'); oiq.type = 'text/javascript'; oiq.async = true; oiq.src = document.location.protocol + '//px.owneriq.net/stas/s/lycosn.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oiq, s); })(); } /////// Google Analytics var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21402695-21']); _gaq.push(['_setDomainName', 'angelfire.com']); _gaq.push(['_setCustomVar', 1, 'member_name', 'commandstation', 3]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); ////// Lycos Initialization ///////////////////// var lycos_ad = Array(); var lycos_search_query = ""; var lycos_onload_timer; var cm_role = "live"; var cm_host = "angelfire.lycos.com"; var cm_taxid = "/memberembedded"; var angelfire_member_name = "commandstation"; var angelfire_member_page = "commandstation/it/s_table.htm"; var angelfire_ratings_hash = "1765982198:b959dd533d3c0054397576f66ff69f71"; var lycos_ad_category = null; var lycos_ad_remote_addr = "209.202.244.9"; var lycos_ad_www_server = "www.angelfire.lycos.com"; var edit_site_url = "www.angelfire.lycos.com/landing/landing.tmpl?utm_source=house&utm_medium=landingpage&utm_campaign=toolbarlink"; </script> <script type="text/javascript" src="https://scripts.lycos.com/catman/init.js"></script> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/95963596/ANG_300x250_dfp', [300, 250], 'div-gpt-ad-1450207484070-0').addService(googletag.pubads()); googletag.enableServices(); }); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/95963596/ANG_above_728x90_dfp', [728, 90], 'div-gpt-ad-1450207484070-1').addService(googletag.pubads()); googletag.enableServices(); }); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/95963596/ANG_below_728X90_dfp', [728, 90], 'div-gpt-ad-1450207484070-2').addService(googletag.pubads()); googletag.enableServices(); }); </script> <script type="text/javascript"> (function(isV) { if (!isV) { return; } //this.lycos_search_query = lycos_get_search_referrer(); var adMgr = new AdManager(); var lycos_prod_set = adMgr.chooseProductSet(); var slots = ["leaderboard", "leaderboard2", "toolbar_image", "toolbar_text", "smallbox", "top_promo", "footer2","slider"]; var adCat = this.lycos_ad_category; adMgr.setForcedParam('page', (adCat && adCat.dmoz) ? adCat.dmoz : 'member'); if (this.lycos_search_query) { adMgr.setForcedParam("keyword", this.lycos_search_query); } else if (adCat && adCat.find_what) { adMgr.setForcedParam('keyword', adCat.find_what); } for (var s in slots) { var slot = slots[s]; if (adMgr.isSlotAvailable(slot)) { this.lycos_ad[slot] = adMgr.getSlot(slot); } } adMgr.renderHeader(); adMgr.renderFooter(); }((function() { var w = 0, h = 0, minimumThreshold = 300; if (top == self) { return true; } if (typeof(window.innerWidth) == 'number' ) { w = window.innerWidth; h = window.innerHeight; } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { w = document.body.clientWidth; h = document.body.clientHeight; } return ((w > minimumThreshold) && (h > minimumThreshold)); }()))); window.onload = function() { var f = document.getElementById("lycosFooterAd"); var b = document.getElementsByTagName("body")[0]; b.appendChild(f); f.style.display = "block"; document.getElementById('lycosFooterAdiFrame').src = '/adm/ad/footerAd.iframe.html'; // Slider Injection (function() { var e = document.createElement('iframe'); e.style.border = '0'; e.style.margin = 0; e.style.display = 'block'; e.style.cssFloat = 'right'; e.style.height = '254px'; e.style.overflow = 'hidden'; e.style.padding = 0; e.style.width = '300px'; })(); // Bottom Ad Injection ( function() { var b = document.getElementsByTagName("body")[0]; var iif = document.createElement('iframe'); iif.style.border = '0'; iif.style.margin = 0; iif.style.display = 'block'; iif.style.cssFloat = 'right'; iif.style.height = '254px'; iif.style.overflow = 'hidden'; iif.style.padding = 0; iif.style.width = '300px'; iif.src = '/adm/ad/injectAd.iframe.html'; var cdiv = document.createElement('div'); cdiv.style = "width:300px;margin:10px auto;"; cdiv.appendChild( iif ); if( b ) { b.insertBefore(cdiv, b.lastChild); } })(); } </script> <style> #body .adCenterClass { margin:0 auto; display:block !important; overflow:hidden; width:100%; } #body .adCenterClass #ad_container { display:block !important; float:left; width:728px; } @media (min-width: 768px) {  #body .adCenterClass #ad_container { width: calc(100% - 372px); } } @media (min-width: 1110px) {  #body .adCenterClass #ad_container { width: calc(100% - 372px); } } </style> <div style="background:#abe6f6; border-bottom:1px solid #507a87; position:relative; z-index:9999999"> <div class="adCenterClass"> <a href="https://www.angelfire.lycos.com/" title="Angelfire.com: build your free website today!" style="display:block; float:left; width:186px; border:0"> <img src="/adm/ad/angelfire-freeAd.jpg" alt="Site hosted by Angelfire.com: Build your free website today!" style="display:block; border:0" /> </a> <div id="ad_container"> <script type="text/javascript">document.write(lycos_ad['leaderboard']);</script> </div> </div> </div>  <script type="text/javascript">document.write(lycos_ad['slider']);</script> <div id="lycosFooterAd" style="background:#abe6f6; border-top:1px solid #507a87; clear:both; display:none; position:relative; z-index:9999999"> <div class="adCenterClass" style="display:block!important; overflow:hidden; width:936px;"> <div id="aflinksholder" style="float:left; width:186px;"> <a href="https://www.angelfire.lycos.com/" title="Angelfire.com: build your free website today!" style="display:block; border:0"> <img src="/adm/ad/angelfire-freeAd2.jpg" alt="Site hosted by Angelfire.com: Build your free website today!" style="display:block; border:0" /> </a> </div> <iframe id="lycosFooterAdiFrame" style="border:0; display:block; float:left; height:96px; overflow:hidden; padding:0; width:750px"></iframe> </div> </div>  <script data-cfasync="false" language="javascript" async src="//udmserve.net/udm/img.fetch?sid=17754;tid=1;dt=6;"></script>  </XMP>

Numbers	Alphabet	Dates	Currency	Fixed
1	C	01-01-2006	$ 5.00	Fixed
2	D	04-13-2005	$ 6.70	Fixed
3	E	08-17-2006	$ 6.50	Fixed
4	F	01-01-2005	$ 4.20	Fixed
5	G	05-12-2006	$ 7.15	Fixed
15			$ 29.55

You'll need the following images:

|| ||

<HTML>
<HEAD>
<TITLE> Sortable Table </TITLE>
</HEAD>

<Script Language="JavaScript">
<!--
var image_path = "images/";
var image_up =   "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];  }
if (!firstRow) return;

for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow">  <img src="'+ image_path + image_none + '" alt="?"/></span></a>'; }}
alternate(table); }

function ts_resortTable(lnk) {
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];  }
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'TABLE');

if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[Ł$€]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) {
firstRow[i] = table.rows[0][i];  }
for (j=1;j<table.rows.length;j++) {
newRows[j-1] = table.rows[j];  }
newRows.sort(sortfn);
if (span.getAttribute("sortdir") == 'down') {
ARROW = '  <img src="'+ image_path + image_up + '" alt="?"/>';
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
ARROW = '  <img src="'+ image_path + image_down + '" alt="?"/>';
span.setAttribute('sortdir','down');  }

for (i=0; i<newRows.length; i++) {
if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
table.tBodies[0].appendChild(newRows[i]);  }}
for (i=0; i<newRows.length; i++) {
if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
table.tBodies[0].appendChild(newRows[i]);  }

span.innerHTML = ARROW;
alternate(table); }

function ts_sort_currency(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
return parseFloat(aa) - parseFloat(bb); }

function replace(s, t, u) {
i = s.indexOf(t);
r = "";
if (i == -1) return s;
r += s.substring(0,i) + u;
if ( i + t.length < s.length)
r += replace(s.substring(i + t.length, s.length), t, u);
return r; }

<CENTER>
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<tr>
<th>				Numbers	</th>
<th>				Alphabet	</th>
<th>				Dates		</th>
<th>				Currency	</th>
<th class="Fixed">	Fixed		</th>
</tr>

<tr>
<td>	1		</td>
<td>	C		</td>
<td>	01-01-2006	</td>
<td>	$ 5.00	</td>
<td>	Fixed		</td>
</tr>

<tr>
<td>	2		</td>
<td>	D		</td>
<td>	04-13-2005	</td>
<td>	$ 6.70	</td>
<td>	Fixed		</td>
</tr>

<tr>
<td>	3		</td>
<td>	E		</td>
<td>	08-17-2006	</td>
<td>	$ 6.50	</td>
<td>	Fixed		</td>
</tr>

<tr>
<td>	4		</td>
<td>	F		</td>
<td>	01-01-2005	</td>
<td>	$ 4.20	</td>
<td>	Fixed		</td>
</tr>

<tr>
<td>	5		</td>
<td>	G		</td>
<td>	05-12-2006	</td>
<td>	$ 7.15	</td>
<td>	Fixed		</td>
</tr>

</body>
</HTML>

Back to Main Menu