Posted on : 13-11-2010 | By : caroline | In : Ajax, TableSorter
Tools: Jquery/Ajax, HTML, XML file
Output: Sortable HTML table
Example: http://www.bogartcomputing.com/tablesorter/ajax_table_sort.html
ajax_table_sort.html
<html><head><script type="text/javascript" src="http:/bogartcomputing.com/tablesorter/jquery.js"></script>
<script type="text/javascript" src="http:/bogartcomputing.com/tablesorter/jquery.tablesorter.js"></script>
<style type="text/css">th {text-decoration:underline;cursor:pointer; text-align:left } </style>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function()
{
getTableXml();
$("#myTable").tablesorter({debug:true});
}
);
function getTableXml() {
var rank = 1;
var tableUrl = 'cd.xml';
$.ajax({
url: tableUrl,
dataType: ($.browser.msie) ? "text" : "xml",
processData: false,
success: processXml,
error: processError
});
function processXml(data){
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find('CD').each(function(){
var title = $(this).find('TITLE').text();
var artist = $(this).find('ARTIST').text();
var country = $(this).find('COUNTRY').text();
$('<tr></tr>').html('<td>' + rank++ + '</td><td>' + title + '</td><td>' + artist + '</td><td>' + country + '</td>').appendTo('table');
});
$('#myTable').trigger("update");
}
function processError(xhr, ajaxOptions, thrownError)
{
alert(xhr.responseText);
alert(xhr.responseXML.childNodes[1].children[0].childNodes[0].wholeText);
alert(xhr.getAllResponseHeaders());
// alert(ajaxOptions);
// alert(thrownError);
}
}
</script>
</div>
<div style = "clear: both;"></div>
</div>
</body>
</html>
cd.xml
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
...
</CATALOG>
0