Can anyone tell me why I cannot seem to sort this table? I downloaded sorttable.js from this site: http://www.kryogenix.org/code/browser/sorttable/#ajaxtables
<!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 charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>XML Table Sorting</title>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jssort.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Sortable Table of Search Queries</h1>
<table id="sortableTable" class="sortable" cellspacing="0" cellpadding="0" ></table>
</div>
<script>
// load page and display table data
r(function()
{
alert('DOM Ready!');
loadXMLDoc();
sortTheTable();
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
function loadXMLDoc()
{
if (window.ActiveXObject)
{
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = 'false';
xmlDoc.load('Linux_Sort.xml');
}
else
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
createTable(xmlhttp);
}
};
xmlhttp.open("GET", "Linux_Sort.xml", false);
xmlhttp.send();
} // end else
}
function createTable(xml)
{
var i;
var xmlDoc = xml.responseXML;
var tableInsert = '<thead><tr><th id="problem_header"><span>Problem Type</span></th><th><span>Task</span></th><th id="page_header"><span>Page No.</span></th><th id="risk_header"><span>Risk</span></th></tr></thead>';
tableInsert +='<tbody>';
var x = xmlDoc.getElementsByTagName("record");
for (i = 0; i <x.length; i++)
{
tableInsert += '<tr><td class="lalign">' +
x[i].getElementsByTagName("actionplan")[0].childNodes[0].nodeValue +
'</td><td class="lalign">' +
x[i].getElementsByTagName("task")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("pageNo")[0].childNodes[0].nodeValue +
"</td><td class='risk'>" +
x[i].getElementsByTagName("risk")[0].childNodes[0].nodeValue +
"</td></tr>";
}
tableInsert += '</tbody>';
document.getElementById("sortableTable").innerHTML = tableInsert;
// document.getElementByTagName("tbody").innerHTML = tableInsert;
}
function sortTheTable()
{
var newTableObject = document.getElementById("sortableTable")
sorttable.makeSortable(newTableObject);
}
</script>
</body>
</html>
Here is the sample XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Linux xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<record>
<actionplan> OAv </actionplan>
<task>something here</task>
<pageNo>6</pageNo>
<risk>3</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>7</pageNo>
<risk>3</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>9</pageNo>
<risk>2</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>10</pageNo>
<risk>2</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>Disal1 root login via SSH</task>
<pageNo>12</pageNo>
<risk>1</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>Disable send and accept ICMP redirects</task>
<pageNo>13</pageNo>
<risk>1</risk>
</record>
</Linux>
I have the table piece working. however, I cannot seem to get it to sort. It is relevant to note that this information is being displayed via local files for use on a tablet browser. So far, it only displays in Firefox.
Put the tbody out of the loop:
also don't forget double-quote around the id:
As the ActiveXObject has no method to check readyState, a messy method is to call sortTable after using a
setTimeoutfunction