Sorting XML data in HTML Table using Prototype Table Sorter Class
can anyone Sh开发者_如何学Cow me example to put the XML data in a HTML table Using Prototype Table Sorter Class??
Ok I at last comes up with the solution hope that will help also for people who need it in future use so just change the name of the XML At:
xmlhttp.open("GET","[XML File and is path]",false);
and then use the Loop data3 as you wanted in my case it was :
var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";
var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;
data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}
Because i was taking data about some internet packages and then putting it in the Array/Json notation to send it to the prototype table sorter class so you just have to edit this for your own use and data...!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prototype Table Sorter Class : XML</title>
<meta name="keywords" content="javascript, prototype, prototype.js, table sorter, table sorter prototype" />
<meta name="description" content="Demo of TableOrderer a table sorter class for prototype.js" />
<script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>
<script type="text/javascript" language="JavaScript" src="js/table_orderer.js"></script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/tableorderer.css" type="text/css" media="screen" />
<script type="text/javascript" language="JavaScript">
// var sess=document.getElementById("sess").value;
if(window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","xml/zczc@hotmail.com_internet.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("Results");
var charg= x[0].getElementsByTagName("charges")[0].childNodes[0].nodeValue;
//alert(8);
var data3 = new Array(x.lengths);
for(i=0; i<x.length;i++)
{
var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";
var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;
data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}
}
</script>
</head>
<body>
<div id="container3"></div>
<script>
new TableOrderer('container3',{data : data3,allowMultiselect : false,search: true,paginate : true,pageCount : 15});
</script>
</body>
</html>
for Table Sorting Class of Prototype you can log on to : http://prototools.negko.com/demo/tableorderer/
加载中,请稍侯......
精彩评论