Home|Sitemap|Contact

How can you sort a list in a division without refreshing the page?

Put the values (probably from the server side database) into a client side array.  Use JavaScript to make the list inside the division, and also to sort the list without refreshing the page.


<!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, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>Client Side Resort List</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));
}

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!=sortIdxA) {
        sortIdx=pIdx;
        dir="asc";
        var out='<table border="0" style="border-collapse: collapse" width="100%"><thead><tr>';
        out += '<td><a href="#" onclick="return makeList(0);">company<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(1);">address<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(2);">(cont) <\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(3);">city<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(4);">state<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(5);">zipcode<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(6);">phone<\/a><\/td><\/tr><\/thead><tbody>';

        var sorted = myList.sort(sortByIdx);
        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><a href="#" onclick="return makeList(0);">company<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(1);">address<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(2);">(cont) <\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(3);">city<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(4);">state<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(5);">zipcode<\/a><\/td>';
        out += '<td><a href="#" onclick="return makeList(6);">phone<\/a><\/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>
</head>

<body>

<div id="theExample">
<script type="text/javascript">makeList(0);</script>
</div>
</body>

</html>