my Html code consisting a demo table where I populate a table manually(where tablesorter is working) and I am populating another table from xml using searchXml(), where tablesort is not working... my code is added below. please help.. thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->
<script src="docs/js/jquery-1.2.6.min.js"></script>
<!-- Pick a theme, load the plugin & initialize plugin -->
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
<script>
$(function(){
$('table').tablesorter({
widgets : ['zebra', 'columns'],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
});
</script>
</head>
<body>
<!-- demo table which is sorting-->
<table class="tablesorter">
<thead>
<tr><th>Date</th><th>Product</th><th>Quantity</th><th>GrossPrice</th><th>Profit</th></tr>
</thead>
<tbody>
<tr><td>2/10/2007</td><td>milk</td><td>20</td><td>100</td><td>20</td></tr><tr><td>2/09/2009</td><td>sugar</td><td>45</td><td>1000</td><td>100</td></tr><tr><td>2/09/2010</td><td>sugar</td><td>40</td><td>600</td><td>50</td></tr><tr><td>1/01/2001</td><td>milk</td><td>10</td><td>50</td><td>10</td></tr><tr><td>2/09/2009</td><td>tea</td><td>45</td><td>1000</td><td>100</td></tr>
</tbody>
</table>
<!--end of demo table -->
</br>
</br>
Select an option:
<select type="input" name="ProductName" id="ProductList" onchange="searchXML()">
<option> </option>
<option>all</option>
</select>
<br />
<div id="results">
</div>
<script type="text/javascript">
function searchXML()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("ProductName");
input = document.getElementById("ProductList").value;
size = input.length;
divText=""
if (input == "")
{
document.getElementById("results").innerHTML= "Please select a Product Name!";
return false;
}
if (input === "all")
{
var y=xmlDoc.getElementsByTagName("entry");
for (i=0;i<y.length;i++)
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h2>The product details are:</h2><br /><table class=tablesorter >";
divText+="<thead><tr><th>Date</th><th>Product</th><th>Quantity</th><th>GrossPrice</th><th>Profit</th></tr></thead><tbody>";
}
divText += "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td >" + profit + "</td></tr>";
}
}
if (divText=="")
{
divText = "<h2>The product does not exist.</h2>";
}
else
{
divText+="</tbody></table>";
}
document.getElementById("results").innerHTML= divText;
}
</script>
</body>
</html>
my xml file
<?xml version="1.0" encoding="UTF-8"?>
<item>
<entry>
<ProductName>milk</ProductName>
<Date>2/10/2007</Date>
<Quantity>20</Quantity>
<GrossPrice>100</GrossPrice>
<Profit>20</Profit>
</entry>
<entry>
<ProductName>sugar</ProductName>
<Date>2/09/2009</Date>
<Quantity>45</Quantity>
<GrossPrice>1000</GrossPrice>
<Profit>100</Profit>
</entry>
</item>
No comments:
Post a Comment