Knowledge Base Nr: 00273 ajax9.txt - http://www.swe-kaiser.de
Ajax: Tabellen umsortieren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajaxdemo: Tabellen umsortieren</title>
<script type="text/javascript">
function convert(sValue, sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "ort":
return parseInt(sValue);
default:
return sValue.toString();
}
}
function generateCompareTRs(iCol, sDataType)
{
return function compareTRs(oTR1, oTR2)
{
var v1 = oTR1.cells[iCol].firstChild.nodeValue;
if (oTR1.cells[iCol].lastChild.lastChild)
v1 = oTR1.cells[iCol].lastChild.lastChild.nodeValue;
//achtung: die links in der spalte 'ort' stellen eigene knoten dar
var v2 = oTR2.cells[iCol].firstChild.nodeValue;
if (oTR2.cells[iCol].lastChild.lastChild)
v2 = oTR2.cells[iCol].lastChild.lastChild.nodeValue;
var vValue1 = convert(v1, sDataType);
var vValue2 = convert(v2, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function sortTable(sTableID, iCol, sDataType)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body link="#0000FF" vlink="#0000FF">
<h1 align="center">Ajax: Tabellen umsortieren</h1>
<center>
<table id="tblSort" bgcolor="#80ffff" border="3" align="center" width="100%">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0, 'int')" style="cursor:pointer" nowrap bgcolor="#00FF00">Nr.</th>
<th onclick="sortTable('tblSort', 1)" style="cursor:pointer" nowrap bgcolor="#00FF00">Art</th>
<th onclick="sortTable('tblSort', 2)" style="cursor:pointer" nowrap bgcolor="#00FF00">Autor</th>
<th onclick="sortTable('tblSort', 3)" style="cursor:pointer" nowrap bgcolor="#00FF00">Titel</th>
<th onclick="sortTable('tblSort', 4, 'ort')" style="cursor:pointer" nowrap bgcolor="#00FF00">Ort</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>S</td>
<td>Alt, Franz</td>
<td>Jesus - der erste neue Mann</td>
<td>Neuohne</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Arjouni, Jakob</td>
<td>Ein Mann, ein Mord</td>
<td><a href="buchPosNeu.php3">Neu</a> <a href="buchPos.php3?p=3">3</a></td>
</tr>
<tr>
<td>3</td>
<td>B</td>
<td>Arjouni, Jakob</td>
<td>Magic Hoffmann</td>
<td><a href="buchPosNeu.php3">Neu</a> <a href="buchPos.php3?p=2">2</a></td>
</tr>
<tr>
<td>4</td>
<td>B</td>
<td>Bichsel, Peter</td>
<td>Eigentlich möchte Frau Blum den Milchmann kennenlernen</td>
<td><a href="buchPosNeu.php3">Neu</a> <a href="buchPos.php3?p=4">4</a></td>
</tr>
<tr>
<td>5</td>
<td>B</td>
<td>Chesterton, G.K.</td>
<td>Der Mann, der zuviel wusste</td>
<td><a href="buchPosNeu.php3">Neu</a> <a href="buchPos.php3?p=5">5</a></td>
</tr>
<tr>
<td>6</td>
<td>B</td>
<td>Fallada, Hans</td>
<td>Kleiner Mann was nun?</td>
<td><a href="buchPosNeu.php3">Neu</a> <a href="buchPos.php3?p=2">2</a></td>
</tr>
<tr>
<td>34</td>
<td>B</td>
<td>versch.</td>
<td>Mannsbilder - Liebesgedichte von Männern</td>
<td><a href="buchPosNeu.php3">Neu</a></td>
</tr>
</table>
</body>
</html>