Ergebnis 1 bis 2 von 2
  1. #1
    joergi ist offline Mitglied
    registriert
    02-04-2012
    Beiträge
    48

    Tabelle sortieren

    Hi,

    ich suche eine Möglichkeit, eine Tabelle zu sortieren. Unter der Verlinkung https://wiki.selfhtml.org/wiki/JavaS...isch_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:


    Code:
    <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

  2. #2
    The_C ist offline Tripel-As
    registriert
    01-08-2011
    Beiträge
    242

    AW: Tabelle sortieren

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

Ähnliche Themen

  1. Tabelle sortieren
    Von Skully im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 15-08-2009, 19:59
  2. Tabelle Sortieren und aufteilen (Seiten)
    Von Maddin007 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 21-09-2008, 17:07
  3. Tabelle Sortieren
    Von Dog86 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 13-04-2008, 16:44
  4. Tabelle sortieren
    Von BoToX im Forum JavaScript
    Antworten: 35
    Letzter Beitrag: 15-10-2006, 16:15
  5. [Excel] Tabelle sortieren
    Von Iltis im Forum Windows
    Antworten: 8
    Letzter Beitrag: 19-12-2003, 21:10

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •