Anja: Tabelle Sortieren

SELF-Forum

Tabelle Sortieren

Anja
– Informationen zu den Bewertungsregeln

Hallo Leute,
Ich möchte gern eine html tabelle dynamisch sortieren und habe auch ein script dazu gefunden. Einziger Nachteil: die Tabelle enthält Links und die werden nicht richtig sortiert. weiß jemand wie ich das script dazu bringe die links zu ignorieren? Tschuldigung für den vielen code, als javascript-neuling konnte leider die relevante Stelle nicht ausmachen
Danke für Tipps,
Anja

// JavaScript Document
var default_order = "asc"; // "asc" || "desc"
var asc_img_uri = "asc.gif";
var desc_img_uri = "desc.gif";
var asc_img_alt_text =
    "aufsteigend sortiert: ändern in absteigend sortiert";
var desc_img_alt_text =
    "absteigend sortiert: ändern in aufsteigend sortiert";

var tables = new Array();
var ti = 0;

function sort_table(id) {
   this.id = id;
   this.obj;
   this.tbody_obj;
   this.sort_cols = 0;
   this.sort_rows = 0;
   this.img_ids = new Array();
   this.tr_ids = new Array();
   this.td_ids = new Array();
   this.active_sort_col;
   this.active_sort_order = default_order;
}

function init_tabsort(table_id) {
   if(!document.getElementById) return;
   tables[ti] = new sort_table(table_id);
   var t = ti;
   ti += 1;
   tables[t].obj = document.getElementById(table_id);
   for(var i = 0; i < tables[t].obj.childNodes.length; i++) {
    switch(tables[t].obj.childNodes[i].nodeName.toLowerCase()) {
         case 'colgroup':
            for(j = 0;
            j < tables[t].obj.childNodes[i].childNodes.length;
            j++)
if(tables[t].obj.childNodes[i].childNodes[j].nodeName.
toLowerCase() == 'col')
               tables[t].sort_cols += 1;
            break;
         case 'tbody':
            tables[t].tbody_obj = tables[t].obj.childNodes[i];
            break;
         default: break;
      }
   }
   var tri = 0;
   var tdi = 0;
   for(i = 0; i < tables[t].tbody_obj.childNodes.length; i++) {
if(tables[t].tbody_obj.childNodes[i].nodeName.toLowerCase()
      == 'tr') {
         tables[t].tbody_obj.childNodes[i].id = 'tr_' + tri;
         tables[t].tr_ids.push('tr_' + tri);
         tables[t].sort_rows += 1;
         tdi = 0;
         for(j = 0;
         j < tables[t].tbody_obj.childNodes[i].childNodes.length; j++) {
if(tables[t].tbody_obj.childNodes[i].childNodes[j].nodeName.toLowerCase() == 'td') {
   tables[t].tbody_obj.childNodes[i].childNodes[j].id
   = 'tr_' + tri + '_td_' + tdi;
   tables[t].td_ids.push('tr_' + tri + '_td_' + tdi);
               tdi += 1;
            }
         }
         tri += 1;
      }
   }
}

function get_sort_table_obj_by_id(id) {
   for(var i = 0; i < tables.length; i++)
      if(tables[i].id == id)
         return(tables[i]);
}

function numsort(a,b) {
   return parseFloat(a) - parseFloat(b);
}
function stringComparison(a, b) {
 a = a.toLowerCase();

a = a.replace(/ä/g,"a");
 a = a.replace(/ö/g,"o");
 a = a.replace(/ü/g,"u");
 a = a.replace(/ß/g,"s");

b = b.toLowerCase();

b = b.replace(/ä/g,"a");
 b = b.replace(/ö/g,"o");
 b = b.replace(/ü/g,"u");
 b = b.replace(/ß/g,"s");

return(a==b)?0:(a>b)?1:-1;
}

function tabsort(table_id, sort_type, col_n) {
   if(!document.getElementById) return;
   var delimiter = "|||||";
   var to = get_sort_table_obj_by_id(table_id);
   var sort_array = new Array();
   for(var i = 0; i < to.sort_rows; i++) {
      tr_array = new Array();
      tr_id = 'tr_' + i;
      td_id = tr_id + '_td_' + col_n;
      tr_array.push(document.getElementById(td_id).innerHTML);
      for(var j = 0; j < to.sort_cols; j++) {
          if(j == col_n) continue;
          else {
             tr_id = 'tr_' + i;
             td_id = tr_id + '_td_' + j;
             tr_array.push
             (document.getElementById(td_id).innerHTML);
          }
      }
      tr_str = tr_array.join(delimiter);
      sort_array.push(tr_str);
   }
   if(sort_type == 'an')
      sort_array.sort(stringComparison);
   else if(sort_type == 'n')
      sort_array.sort(numsort);
   if(to.active_sort_order == 'desc') {
      sort_array.reverse();
      to.active_sort_order = 'asc';
   }
   else
      to.active_sort_order = 'desc';
   for(i = 0; i < sort_array.length; i++) {
      tr_array = sort_array[i].split(delimiter);
      first = tr_array.shift();
      tr_array.splice(col_n, 0, first);
      for(j = 0; j < to.sort_cols; j++) {
         tr_id = 'tr_' + i;
         td_id = tr_id + '_td_' + j;
         document.getElementById(td_id).innerHTML = tr_array[j];
      }
   }
   var img_html;
   if(to.active_sort_order == 'asc')
      img_html = '<img src="' + desc_img_uri + '" alt="' +
      desc_img_alt_text + '">';
   else
      img_html = '<img src="' + asc_img_uri + '" alt="' +
      asc_img_alt_text + '">';
   for(i = 0; i < to.sort_cols; i++) {
      if(i == col_n)
document.getElementById(table_id + '_sort_img_' + i).innerHTML =
img_html + " ";
      else
         document.getElementById(table_id + '_sort_img_' + i).innerHTML = "";
   }
}

html:

<body onload="init_tabsort('objekttabelle')">

<form action="javascript:void(0)">
<table id="objekttabelle" border="1">
<colgroup>
<col style="width:15%">
<col style="width:10%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
</colgroup>
<thead>
<tr>
<th><button type="button"
onClick="tabsort('objekttabelle','an',0)">
<span id="objekttabelle_sort_img_0"></span>
Name</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',1)">
<span id="objekttabelle_sort_img_1"></span>
Baujahr</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',2)">
<span id="objekttabelle_sort_img_2"></span>
Entwerfer</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',3)">
<span id="objekttabelle_sort_img_3"></span>
Adresse</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',4)">
<span id="objekttabelle_sort_img_4"></span>
Stadtteil</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',5)">
<span id="objekttabelle_sort_img_5"></span>
Stil</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',6)">
<span id="objekttabelle_sort_img_6"></span>
Typus</button></th>
</tr>
</thead>
<tbody>
<tr>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried haupt-klein.html'">Waggonfabrik
    Falkenried</a></TD>
<TD>2005-2006</TD>
<TD>St&#228;dtebauentwurf: Bolles+Wilson</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Falkenried</a><BR></TD>
<TD>Hoheluft-0st</TD>
<TD>Architektur der Gegenwart</TD>
<TD>St&#228;dtebauliches Ensemble</TD>
</tr>
<tr>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried bauteil a-klein.html'">Waggonfabrik
    Falkenried Bauteil A</a></TD>
<TD>2005-2006</TD>
<TD>Baumschlager Eberle</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Lehmweg 16</a></TD>
<TD>Hoheluft-0st</TD>
<TD>Architektur der Gegenwart</TD>
<TD>Wohngeb&#228;ude</TD>
</tr>
<TR>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried apartments-klein.html'">Waggonfabrik
    Falkenried, Falkenried Apartments</a></TD>
<TD>2005-2006</TD>
<TD>Bothe Richter Teherani</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Falkenried 23-29</a></TD>
<TD >Hoheluft-0st</TD>
<TD >Architektur der Gegenwart</TD>
<TD >Wohngeb&#228;ude</TD>
</TR>
</tbody>
</table>
</form>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabelle Sortieren

    der-daniel
    – Informationen zu den Bewertungsregeln

    hi!

    habe deinen code gerade verarbeitet und konnte keinen fehler finden.
    was genau wird falsch sortiert?

    beste grüße,
    der-daniel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle Sortieren

      Anja
      – Informationen zu den Bewertungsregeln

      hi!

      habe deinen code gerade verarbeitet und konnte keinen fehler finden.
      was genau wird falsch sortiert?

      beste grüße,
      der-daniel

      tabellenzeilen mit links zb.:
      <TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried haupt-klein.html'">Waggonfabrik
          Falkenried</a></TD>

      wird nicht unter w wie Waggonfabrik sondern unter a wie ahref eingeordnet. Der Link wird als text aufgefasst.

      grüße,

      Anja

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Tabelle Sortieren

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Anja,

    Ich möchte gern eine html tabelle dynamisch sortieren und habe auch ein script dazu gefunden. Einziger Nachteil: die Tabelle enthält Links und die werden nicht richtig sortiert.

    was heißt "die werden nicht richtig sortiert"?

    weiß jemand wie ich das script dazu bringe die links zu ignorieren? Tschuldigung für den vielen code, als javascript-neuling konnte leider die relevante Stelle nicht ausmachen

    ich habe das Script jetzt nicht durchgesehen, aber versuch doch mal meinen Tabellensortierer. Die mailto-Links auf der Beispielseite werden richtig sortiert.

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle Sortieren

      Anja
      – Informationen zu den Bewertungsregeln

      Hallo Jürgen,
      habe dein script probiert sortiert leider genauso wie das ursprüngliche
      altes script.
      dein script.
      Grüße,
      Anja

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tabelle Sortieren

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Anja,

        mein Tabellensortierer liest die Tabellenfelder mit innerHTML. Daher beginnen Links mit "<a...". Wenn alle Einträge Links sind, ist das auch kein Problem, vor allem, wenn die URL und der Linktext "sortiertechnisch ähnlich genug" sind. Leider ist das bei Deiner Tabelle nicht der Fall. Du müsstest die Vergleichsfunktion dahingehend umschreiben, dass sie prüft, ob ein Link vorliegt, und wenn ja, den Linktext zum Vergleich heranzieht. Evtl reicht es auch, nach "<a" und ">" zu suchen und alles von "<a" bis einschließlich ">" nicht zu berücksichtigen bzw. nur den Teil hinter dem ersten ">" zum Vergleichen zu benutzen.

        Bei der Gelegenheit müsstest du den Teil, der Zahlen erkennt, herausnehmen, da du Zahlen (2005) und Texte (2005-2006) in einer Spalte mischt. Das habe ich nicht vorgesehen. Die Zahlenerkennung brauchst Du nicht, da alle Zahlen vierstellig sind.

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln