Tabelle sortieren

[joergi]

Hi,

ich suche eine Möglichkeit, eine Tabelle zu sortieren. Unter der Verlinkung https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/Tabellen_dynamisch_sortieren fand ich dann einen script, der genau für mich zu passen schien. Ich habe ihn dann angepasst und heraus ist folgender script gekommen:

<style>
table {
border-collapse: collapse;
	border: 1px solid black;
	padding:5px;
}

table td {
	border: 1px solid black;
	padding:5px;
}

table th {
	border: 1px solid black;
	padding:5px;
}
</style>


<script>
(function () {
	"use strict";
	var tableSort = function (tab) {
			var titel = tab.getElementsByTagName("thead")[0].getElementsByTagName("tr")[
				0].getElementsByTagName("th");
			var tbdy = tab.getElementsByTagName("tbody")[0];
			var tz = tbdy.rows;
			var nzeilen = tz.length;
			if (nzeilen == 0) return;
			var nspalten = tz[0].cells.length;
			var arr = new Array(nzeilen);
			var sortiert = -1;
			var sorttype = new Array(nspalten);
			var sortbuttonStyle = document.createElement('style'); // Stylesheet für Button im TH
			sortbuttonStyle.innerText =
				'.sortbutton { width:100%; height:100%; border: none; background-color: transparent; font: inherit; color: inherit; text-align: inherit; padding: 0; cursor: pointer; } .sortbutton::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
			document.head.appendChild(sortbuttonStyle);
			var initTableHead = function (sp) { // Kopfzeile vorbereiten
				var b = document.createElement("button");
				b.type = "button";
				b.className = "sortbutton";
				b.innerHTML = titel[sp].innerHTML;
				b.addEventListener("click", function () {
					tsort(sp);
				}, false);
				titel[sp].innerHTML = "";
				titel[sp].appendChild(b);
			}
			var getData = function (ele, s) {
					var val = ele.textContent; // Nicht im IE8
					if (!isNaN(val) && val.search(/[0-9]/) != -1) return val;
					var n = val.replace(",", ".");
					if (!isNaN(n) && n.search(/[0-9]/) != -1) return n;
					sorttype[s] = "s"; // String
					return val;
				} // getData
			var vglFkt_s = function (a, b) {
					var as = a[sortiert],
						bs = b[sortiert];
					if (as > bs) return 1;
					else return -1;
				} // vglFkt_s
			var vglFkt_n = function (a, b) {
					return parseFloat(a[sortiert]) - parseFloat(b[sortiert]);
				} // vglFkt_n
			var tsort = function (sp) {
					if (sp == sortiert) arr.reverse(); // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen
					else { // Sortieren
						sortiert = sp;
						if (sorttype[sp] == "n") arr.sort(vglFkt_n);
						else arr.sort(vglFkt_s);
					}
					for (var z = 0; z < nzeilen; z++) tbdy.appendChild(arr[z][nspalten]); // Sortierte Daten zurückschreiben
				} // tsort
				// Kopfzeile vorbereiten
			for (var i = 0; i < titel.length; i++) initTableHead(i);
			// Array mit Info, wie Spalte zu sortieren ist, vorbelegen
			for (var s = 0; s < nspalten; s++) sorttype[s] = "n";
			// Tabelleninhalt in ein Array kopieren
			for (var z = 0; z < nzeilen; z++) {
				var zelle = tz[z].getElementsByTagName("td"); // cells;
				arr[z] = new Array(nspalten + 1);
				arr[z][nspalten] = tz[z];
				for (var s = 0; s < nspalten; s++) {
					var zi = getData(zelle[s], s);
					arr[z][s] = zi;
					// zelle[s].innerHTML += "<br>"+zi+"<br>"+sorttype[s]; // zum Debuggen
				}
			}
		} // tableSort
	var initTableSort = function () {
			var sort_Table = document.querySelectorAll("table.sortierbar");
			for (var i = 0; i < sort_Table.length; i++) new tableSort(sort_Table[i]);
		} // initTable
	if (window.addEventListener) window.addEventListener("DOMContentLoaded",
		initTableSort, false); // nicht im IE8
})();
</script>
	<table class="sortierbar">
		<thead>
			<tr>
				<th>Nr.</th>
				<th>Straße</th>
				<th>Preis</th>
				<th>intern</th>
				<th>Stadt</th>
			</tr>
		</thead>

			<tr>
				<td>2213</td>
				<td>Hauptstr. 1</td>
				<td>113.113,--</td>
				<td>237534-98452</td>
				<td>Köln</td>
			</tr>
			<tr>
				<td>1733</td>
				<td>Badstr. 124</td>
				<td>133,--</td>
				<td>323456-12754</td>
				<td>Düsseldorf</td>
			</tr>
			<tr>
				<td>3485</td>
				<td>Hauptstr. 11</td>
				<td>44,24</td>
				<td>237534-98457</td>
				<td>Bonn</td>
			</tr>
			<tr>
				<td>999</td>
				<td>Badstr. 13</td>
				<td>21,14</td>
				<td>754312-12862</td>
				<td>Aachen</td>
			</tr>
			<tr>
				<td>4422</td>
				<td>Hauptstr. 9</td>
				<td>1828,--</td>
				<td>112367-14327</td>
				<td>Koblenz</td>
			</tr>
			<tr>
				<td>2312</td>
				<td>Hauptstr. 324</td>
				<td>123,23</td>
				<td>237534-98456</td>
				<td>Frankfurt</td>
			</tr>
  	</table>

Leider gibt es Probleme beim sortieren der Straße und beim Preis. Bei gleichlautenden Straßennamene, wird nicht nach auf- oder absteigender Hausnummer sortiert. Und beim Preis gibt es auch eine fehlerhafte Sortierung. Gibt es eine Möglichkeit, das Problem zu lösen? Das Format beim Preis darf dabei nicht verändert werden, d.h. glatte Beträge müssen durch ein "--" gekennzeichnet sein wie z.B. 320,-- bzw tausender zusätzlich durch einen Punkt wie z.B. 138.427,--

Danke im voraus für Eure Hilfe

Joergi

 

[The_C]

Hier schau Dir das jQuery Plugin mal an
jQuery plugin: Tablesorter 2.0jQuery plugin: Tablesorter 2.0