How to do indexing in phonegap?

ravi1989 · ‎07-21-2012

Hi

i am getting data web service and show this data in list .. it fine for me ..But i want to show indexing (upper layer of table ).so that when i press A button it only show data of station name (which starting from A)..

Can you please help me i will share you my code..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<title>Departure dashboard</title>
  	<link href="style/style.css" rel="stylesheet" type="text/css" />
  	<link href="style/scrollbar.css" rel="stylesheet" type="text/css" />
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="script/common.js"></script>
	<script type="text/javascript" src="script/soapclient.js"></script>	
	<script type="text/javascript" src="script/jquery.min.js"></script>	
	<script type="text/javascript" src="script/iScroll.js"></script>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
	<script type="text/javascript">
   		var  stationCode;
   		var  stationName;
   		var myTimedCall;
   		var myScroll;
   		function GetDepartureStationDashboard()
  		{      
	  		
	  		document.getElementById('loadingImg').style.visibility = "visible"; 
		     var pl = new SOAPClientParameters();
		     var params = getParams();
		     var parameter1 = unescape(params["getStationCode"]);
		     stationCode=parameter1;
		     var parameter2 = unescape(params["getStationDesc"]).replace(/[+]/g," ");
		     document.getElementById("headingcontent").innerHTML = parameter2;
		     stationName=parameter2;
		     pl.add("parameter1", parameter1);
		     SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
  		}
  		
        function refeshdata(){
            var pl = new SOAPClientParameters();
            var params = getParams();
            var parameter1 = unescape(params["getStationCode"]);
            pl.add("parameter1", parameter1);
            SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
            
        }

function GetDepartureStationDashboard_callBack(r)
{
	document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	tbl.innerHTML = "";
	for (var i = 0; i <r.length-1; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}
				
//window.clearTimeout(myTimedCall);
window.clearInterval(myTimedCall);
 var DestinationName=r[id].stationName;
 var DestinationCode=r[id].crsCode;
         var isServiceAlertPresent=r[id].serviceAlertPresent;
         var isOtherAlertPresent=r[id].otherAlertPresent;
         var alertSummary=r[id].alertsSummary;      
		  window.location.href="departureroute.html?RID="+r[id].RID+"&StationCode="+stationCode+"&Name="+stationName +"&DestinationStationName="+DestinationName+"&DestinationCode="+DestinationCode+"&isServiceAlertPresent="+isServiceAlertPresent+"&isOtherAlertPresent="+isOtherAlertPresent+"&alertSummary="+alertSummary;
			};
		}(i));
		
	
		
		
		
		var td1 = document.createElement('td');
		td1.setAttribute('style','width:1%');
		td1.setAttribute('align','left');
		if(typeof(r[i].platformNo)=="undefined"){
            td1.innerHTML = "";
        }
        else{
            
            td1.innerHTML = r[i].platformNo;
        }
		
		var td2 = document.createElement('td');
		td2.setAttribute('style','width:47%; text-align;left;');
		
		
		td2.innerHTML = r[i].schDepart + "-" + r[i].destSchArrival;
		var td3 = document.createElement('td');
		td3.setAttribute('style','width:35%; text-align;left;');
		
		********From Station name I want to sort this list****
		td3.innerHTML = r[i].stationName + " (" + r[i].crsCode + ")" ;
		var td4 = document.createElement('td');
		td4.setAttribute('style','width:3%');
		td4.setAttribute('align','center');
		
		var td5 = document.createElement('td');
		td5.setAttribute('style','width:14%');
		td5.setAttribute('align','center');
			if(r[i].schDepart == r[i].expDepart)
	{
		td4.innerHTML = "<img src=\"images/correct-icon.png\" width=\"20\" height=\"20\" />";
		td5.innerHTML="";
	}
	else 
	{
		td4.innerHTML = "<img src=\"images/error.png\" width=\"20\" height=\"20\" />";
		td5.innerHTML=r[i].expDepart;
	}
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tbl.appendChild(tr);
	}


	myScroll = new iScroll('mainBodyDiv', {
		snap: 'tr',
		scrollbarClass: 'myScrollbar',
		"onScrollMove": function(e) {
			myScroll.isScrolling = true;
		},
		"onScrollEnd": function(e) {
			window.setTimeout(function() {myScroll.isScrolling = false;}, 120);
		}
	});
	myTimedCall = window.setInterval(function() {refeshdata()}, 120000);
}
		
        
        function homeButtonClick(){
            window.clearInterval(myTimedCall);
            window.location="selectdepartuestation.html";
            
        }
        
        function headingButtonClick(){
            window.clearInterval(myTimedCall);
            window.location="index.html";
            
        }
        
        
	</script>
</head>
<body onload="GetDepartureStationDashboard()">
<div id="wrapper">
  <div class="login_cont">
    <div class="home_icon"><a href=""><img src="images/back-icon.png" alt="Home" title="Home" onclick="homeButtonClick()" /></a></div>
    <h1 class="fr">Departures</h1>
    <div class="cl"></div>
      <div class="mid_cont">
        <div class="grid_cont">
          <div class="heading_bar">
            <h1 class="fl" id="headingcontent"></h1>
            <input name="" type="button" class="heading_btn fr" value="Change" onclick="headingButtonClick()"/>
            <div class="cl"></div>
          </div>
         *********Here i need indexing*****
        <div class="scroll-pane" id="mainBodyDiv">
         <div>
  
      <img src="images/ajax-loader.gif" id="loadingImg" visible =true style="margin:auto; position: absolute; left:50%; top:50%;"/>
  

	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mainBodyDivContent">
	
		
	</table>
	
</div>
</div>
        
            


        <div class="grid_error"><img src="images/help-icon.png" /> Departure Schedule</div>
      </div>
    </div>
  </div>
</div>
<input type="hidden" name="hdnStationName" id="hdnStationName" value="" />
</body>
</html>

Please help

Welcome!

Web and WebWorks Development

How to do indexing in phonegap?