vopgis

Sorting Table

Discussion created by vopgis on Jul 27, 2010
Latest reply on Jul 30, 2010 by gilest
Does any one know how to sort a table in javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<br>
<img src="http://addressfinder.palatine.il.us/Legend.jpg">
<a href="http://www.palatine.il.us/">
<center><img src="http://www.palatine.il.us/images/logo-txt.gif" border="0"></center>
</a>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Village of Palatine Address Finder</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript"

src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
      dojo.require("esri.tasks.find");

      var find, params;
      function init() {
esri.hide(dojo.byId('loading'));
        find = new esri.tasks.FindTask("http://vopdb4/ArcGIS/rest/services/Address_Finder/Address_Finder/MapServer");
        params = new esri.tasks.FindParameters();
        params.layerIds = [0];
        params.searchFields = ["Full_Address","GIS_Key","PIN","Owner_Name","Occupant_Name"];
      }

      function doFind(event) {
esri.show(dojo.byId('loading'));
        params.searchText = dojo.byId("searchText").value;
        find.execute(params, showResults);
      }

      function showResults(results){
esri.hide(dojo.byId('loading'));
    var result, attribs;
    var s = ["<table border=\"10\"><thead><tr style=\"background-color:#A6D785;\"><td nowrap><font size=2.5><b>Full Address</font></td><td nowrap><font size=2.5><b>GIS Key</font></td><td nowrap><font size=2.5><b>PIN#</font></td><td nowrap><font size=2.5><b>Owner</font></td><td nowrap><font size=2.5><b>Owner Address</font></td><td nowrap><font size=2.5><b>Owner City</font></td><td nowrap><font size=2.5><b>Owner State</font></td><td nowrap><font size=2.5><b>Owner ZIP</font></td><td nowrap><font size=2.5><b>Owner Date</font></td><td nowrap><font size=2.5><b>Update Date</font></td><td nowrap><font size=2.5><b>Occupant</font></td><td nowrap><font size=2.5><b>Occupant Phone# 1</font></td><td nowrap><font size=2.5><b>Occupant Phone# 2</font></td><td nowrap><font size=2.5><b>In Village</font></td><td nowrap><font size=2.5><b>Active</font></td></tr></thead><tbody id=\"states\">"];
    for (var i = 0, il = results.length; i < il; i++) {
   result = results[i];
   attribs = result.feature.attributes;
  

if (attribs.Active === "N") {
    s.push("<tr style=\"background-color:#F28282;\"><td nowrap><font size=2.5> " + attribs.Full_Address + "</font></td><td nowrap><font size=2.5>" + attribs.GIS_Key + "</font></td><td nowrap><font size=2.5>" + attribs.PIN + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Address + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_City + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_State + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_ZIP + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Date + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Update + "</font></td><td nowrap><font size=2.5>" + attribs.Occupant_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone1 + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone2 + "</font></td><td nowrap><font size=2.5>" + attribs.Village + "</font></td><td nowrap><font size=2.5>" + attribs.Active + "</font></td></tr>");
    }
else if (attribs.Village === "N") {
    s.push("<tr style=\"background-color:#BDBDBD;\"><td nowrap><font size=2.5> " + attribs.Full_Address + "</font></td><td nowrap><font size=2.5>" + attribs.GIS_Key + "</font></td><td nowrap><font size=2.5>" + attribs.PIN + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Address + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_City + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_State + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_ZIP + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Date + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Update + "</font></td><td nowrap><font size=2.5>" + attribs.Occupant_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone1 + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone2 + "</font></td><td nowrap><font size=2.5>" + attribs.Village + "</font></td><td nowrap><font size=2.5>" + attribs.Active + "</font></td></tr>");
    }
else {
          s.push("<tr><td nowrap><font size=2.5> " + attribs.Full_Address + "</font></td><td nowrap><font size=2.5>" + attribs.GIS_Key + "</font></td><td nowrap><font size=2.5>" + attribs.PIN + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Address + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_City + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_State + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_ZIP + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Date + "</font></td><td nowrap><font size=2.5>" + attribs.Owner_Update + "</font></td><td nowrap><font size=2.5>" + attribs.Occupant_Name + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone1 + "</font></td><td nowrap><font size=2.5>" + attribs.Occ_Phone2 + "</font></td><td nowrap><font size=2.5>" + attribs.Village + "</font></td><td nowrap><font size=2.5>" + attribs.Active + "</font></td></tr>");
   }

  }
 
  s.push("</tbody></table>");
  dojo.byId("tbl").innerHTML = s.join("");
}   
      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
<br>
<center>Find by Address, GIS Key, PIN#, Owner, or Occupant:  <input type="text" id="searchText" size="40" value="" />
<input type="submit" value="Find" onclick="doFind()" /></center>
<br>
    <center><div id="loading"><img src="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/images/loading.gif" /></div>
    <div id="tbl"></div></td center>
<center><div id="tbl"></div>

  </body>
</html>

Outcomes