<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<title>How To Resort A Table Without Page Reload</title>
<script type="text/javascript">
var myList=new Array();
myList[0]=['A. O. Smith Corporation','11270 W. Park Place','','Milwaukee','WI','53224-9508','414-359-4000'];
myList[1]=['AAF-McQUAY Inc.','10300 Ormsby Park Place','Suite 600','Louisville','KY','40223','502-637-0011'];
myList[2]=['Alliant Techsystems Inc.','5050 Lincoln Dr.','','Edina','MN','55436','952-351-3000'];
myList[3]=['American Power Conversion','132 Fairgrounds Rd.','','West Kingston','RI','02892','401-789-5735'];
myList[4]=['Avery Dennison Corporation','150 N. Orange Grove Blvd.','','Pasadena','CA','91103','626-304-2000'];
myList[5]=['Bank of the West','180 Montgomery St.','','San Francisco','CA','94104','925-942-8300'];
myList[6]=['Deluxe Corporation','3680 Victoria St. North','','Shoreview','MN','55126-2966','651-483-7111'];
myList[7]=['Eaton Corporation','Eaton Center','1111 Superior Ave.','Cleveland','OH','44114-2584','216-523-5000'];
myList[8]=['Gannett Co., Inc.','7950 Jones Branch Dr.','','McLean','VA','22107-0910','703-854-6000'];
myList[9]=['Hewlett-Packard Company','3000 Hanover St.','','Palo Alto','CA','94304','650-857-1501'];
myList[10]=['Jones Apparel Group, Inc.','250 Rittenhouse Circle','','Bristol','PA','19007','215-785-4000'];
myList[11]=['Koch Industries, Inc.','4111 E. 37th St. North','','Whichita','KS','67220-3203','316-828-5500'];
myList[12]=['Lockheed Martin Corporation','6801 Rockledge Dr.','','Bethesda','MD','20817-1877','301-897-6000'];
myList[13]=['North Fork Bancorporation, Inc.','275 Broadhollow Rd.','','Melville','NY','11747','631-844-1004'];
myList[14]=['Nu Skin Enterprises, Inc.','75 W. Center St.','','Provo','UT','84601','801-345-6100'];
myList[15]=['Pilgrims Pride Corporation','4845 US Hwy. 271 North','','Pitsburg','TX','75686-0093','903-855-1000'];
myList[16]=['Sun Microsystems, Inc.','4150 Network Circle','','Santa Clara','CA','95054','650-960-1300'];
myList[17]=['Temple-Inland Inc.','1300 S. Mopac Expwy.','','Austin','TX','78746','512-434-5800'];
myList[18]=['The Boeing Company','100 N. Riverside Plaza','','Chicago','IL','60606-1596','312-544-2000'];
myList[19]=['Tiffany & Co.','727 Fifth Ave.','','New York','NY','10022','212-755-8000'];
var sortIdx=-1;
var dir='asc'
// JavaScript sort method, has no provisions for multidimensional arrays
// so we need a custom function
function sortByIdxA(a,b) {
var x = a[sortIdx];
var y = b[sortIdx];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
// JavaScript sort method, has no provisions for multidimensional arrays
// so we need a custom function
function sortByIdxD(a,b) {
var x = a[sortIdx];
var y = b[sortIdx];
return ((y < x) ? -1 : ((y > x) ? 1 : 0));
}
function makeList(pIdx) {
if (pIdx!=sortIdx) {
sortIdx=pIdx;
dir='asc';
var out='<table border="0" style="border-collapse: collapse" width="100%"><thead><tr>';
out += '<td><input type="button" class="tblButton" title="Sort by company" name="bCompany" value="company" onclick="return makeList(0);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by address" name="bAddress" value="address" onclick="return makeList(1);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by address continued" name="bCont" value="(cont.)" onclick="return makeList(2);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by city" name="bCity" value="city" onclick="return makeList(3);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by state" name="bState" value="state" onclick="return makeList(4);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by zipcode" name="bZipcode" value="zipcode" onclick="return makeList(5);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by phone" name="bPhone" value="phone" onclick="return makeList(6);"><\/td><\/tr><\/thead><tbody>';
var sorted = myList.sort(sortByIdxA);
for (var idx=0; idx<sorted.length; idx++) {
out += '<tr><td>'+sorted[idx][0]+'<\/td>';
out += '<td>'+sorted[idx][1]+'<\/td>';
out += '<td>'+sorted[idx][2]+'<\/td>';
out += '<td>'+sorted[idx][3]+'<\/td>';
out += '<td>'+sorted[idx][4]+'<\/td>';
out += '<td>'+sorted[idx][5]+'<\/td>';
out += '<td>'+sorted[idx][6]+'<\/td><\/tr>';
}
out += '<\/tbody><\/table>';
document.getElementById('theExample').innerHTML = out;
} else {
sortIdx=pIdx;
var out='<table border="0" style="border-collapse: collapse" width="100%"><thead><tr>';
out += '<td><input type="button" class="tblButton" title="Sort by company" name="bCompany" value="company" onclick="return makeList(0);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by address" name="bAddress" value="address" onclick="return makeList(1);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by address continued" name="bCont" value="(cont.)" onclick="return makeList(2);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by city" name="bCity" value="city" onclick="return makeList(3);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by state" name="bState" value="state" onclick="return makeList(4);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by zipcode" name="bZipcode" value="zipcode" onclick="return makeList(5);"><\/td>';
out += '<td><input type="button" class="tblButton" title="Sort by phone" name="bPhone" value="phone" onclick="return makeList(6);"><\/td><\/tr><\/thead><tbody>';
if (dir=='asc') {
var sorted = myList.sort(sortByIdxD);
dir="desc";
} else {
var sorted = myList.sort(sortByIdxA);
dir="asc";
}
for (var idx=0; idx<sorted.length; idx++) {
out += '<tr><td>'+sorted[idx][0]+'<\/td>';
out += '<td>'+sorted[idx][1]+'<\/td>';
out += '<td>'+sorted[idx][2]+'<\/td>';
out += '<td>'+sorted[idx][3]+'<\/td>';
out += '<td>'+sorted[idx][4]+'<\/td>';
out += '<td>'+sorted[idx][5]+'<\/td>';
out += '<td>'+sorted[idx][6]+'<\/td><\/tr>';
}
out += '<\/tbody><\/table>';
document.getElementById('theExample').innerHTML = out;
}
return false;
}
</script>
<style type="text/css">
thead {
font-size:0.8em;
font-weight:bold;
}
.tblButton { font-size: 8pt;
height: 21px;
}
td {
font-size:0.8em;
}
</style>
</head>
<body>
<noscript><p>You need JavaScript to view this example.</p></noscript>
<script type="text/javascript">makeList(0);</script>
</body>
</html>Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
