✔ Tabellenausgabe auf mehrere Screens verteilen

[amn.ssy]

Morgen ,

ich habe vor ein paar Tagen ein JS wieder hervor gekramt, das ich mit einem Bekannten vor bald 7 Jahren erstellte. Mittlerweile ist es von Frames befreit, funktioniert unter allen gängigen Browser (zuvor nur IE) und soll nun dahin gehend erweitert werden, daß die Ausgabe der relevanten Zeilen ggf. auf x (z.B. 16) begrenzt wird (auch das geht).
Es werden anschließend Links erzeugt (geht auch), die nach einem click-event die vorherigen Zeilen löscht und die nächsten 16 Zeilen anzeigt u.s.w.
Und genau da häng ich seit 2 Tagen und Nächten fest und finde keinen Ansatz, zumal mir das Programmieren mehr theoretisch als praktisch liegt (Code lesen und verstehen geht recht gut)
Problem a) die Anzahl der Links auf 20 je Reihe begrenzen
Problem b) beim Klick auf den Links die Zeilen löschen und die nächsten erzeugen

Den aktuellen Stand des Projektes könnt ihr hier einsehen http://it-transfer.net/project

Den bisherigen Code habe ich als zip angehängt.

Ich hoffe und freue mich auf euere Unterstützung

Grüße

opiWahn

PS. als nächstes Feature möchte ich einen bestimmten Fall (Tore) eine Suchfunktion für Namen einbauen - aber das ist noch weite Zukunftsmusik

 

[Quaese]

Hi,

du könntest der Funktion fuelleTabelle ein Seitenoffset mitgeben. Das ermöglicht es, die aktuelle Position im Datenarray zu berechnen.

Weiterhin kannst du die Seitenlinks nach dem Einfügen ins Dokument mit einem Event-Handler für das click-Ereignis ausstatten. Dort wird fuelleTabelle mit dem passenden Seitenoffset aufgerufen.

Beispiel:
Die Änderungen sind im Quellcode kommentiert.

//-----------------------------------------------------------------------------
/** Schreibt die Daten des übergebenen Arrays in die übergebene HTML-Tabelle.
 *  -(Object) tabelle: zu füllendes HTML-Tabellenobjekt.
 *  -(Array) daten: 2-dim-Array. Die erste Zeile (daten[0]) enthält die Spal-
 *   tennamen, die übrigen Zeilen enthalten die Werte.
 *  -(Integer) intOffset: Seitenoffset (default: 0)
 */
function fuelleTabelle(doc, daten, intOffset)
{
  // Falls kein Seitenoffset übergeben wurde -> Defaultwert setzen (= erste Seite)
  if(typeof intOffset == "undefined") intOffset = 0;

  var spalten = daten[0].length;  // Anzahl der Spalten
  var zeilen = daten.length;      // Anzahl der Zeilen mit Werten + 1
  var lz = 0;                     // Anzahl hinzugefügte Leerzeilen
  var liga = daten[0][1];         // Merker für aktuell ausgegebene Liga
  var jahr = daten[0][0];         // Merker für aktuell ausgegebenes Jahr
  var zMax = 16;                  // Anzahl der max. Zeilen je Seite
  var anzSeiten = Math.ceil(zeilen/zMax); // gerundete Anzahl der Seiten
  var startZeile = 0;

  var meldung0 = "Zu dieser Abfrage konnten keine Daten gefunden werden";

  tabelle = doc.getElementById('Anzeige');
  seiten = doc.getElementById('Seiten');
  meldezeile = doc.getElementById('Meldezeile');

  clearScreen();

  // Fehlerausgabe
 if (zeilen <= 1)
  {
    meldezeile.insertRow(0);
    meldezeile.rows[0].bgColor = "#7aa2be";
    meldezeile.rows[0].insertCell(0);
    meldezeile.rows[0].cells[0].innerHTML = (meldung0);
    meldezeile.rows[0].cells[0].colSpan = 11;
    return;
  }

  // Datensatzmenge und Anzahl der Seiten

  if (zeilen > 1)
  {

    if (zeilen > zMax)
    {
      seiten.insertRow(0);
      seiten.rows[0].bgColor = "#7aa2be";

      for (var i = 0; i < anzSeiten; i++)
      {
        seiten.rows[0].insertCell(i);
        // Seitennavigationslink einfügen (+++rel-Attribut wichtig wegen Seitenindex+++)
        seiten.rows[0].cells[i].innerHTML = ('<a href="'+(i+1)+'" rel="'+i+'">'+"["+(i+1)+"]"+'</a>');
        // Eingefügten Link mit click-Handler versehen
        seiten.rows[0].cells[i].getElementsByTagName("a")[0].onclick = function(evt){
          // Standardaktion (click) verhindern
          (window.event)? (window.event.returnValue=false) : evt.preventDefault();
          // Funktion zum Füllen der Tabelle mit aktuellem Offset aufrufen
          fuelleTabelle(document, arraySuchErg, parseInt(this.rel));
        };
      }

    }

    meldezeile.insertRow(0);
    meldezeile.rows[0].bgColor = "#7aa2be";
    meldezeile.rows[0].insertCell(0);
    meldezeile.rows[0].cells[0].innerHTML = ((zeilen-1)+ " Datensätze wurden auf "+anzSeiten+" Seite(n) verteilt");
    meldezeile.rows[0].cells[0].colSpan = 11;
  }

  // Spaltennamen und Werte in die Tabelle schreiben.
  for (var i = startZeile; i < startZeile + zMax; i++)
  {
    // Bei Ligawechsel...
    if (liga != daten[i][1] || jahr != daten[i][0])
    {
      // Den neuen Ligawert merken.
      liga = daten[i+zMax*intOffset][1];
      jahr = daten[i+zMax*intOffset][0];
      tabelle.insertRow(i+lz);
      // Zwischenzeile mit Liga schreiben.
      tabelle.rows[i+lz].bgColor = "#7aa2be";
      tabelle.rows[i+lz].insertCell(0);
      if (liga == "ol")
        tabelle.rows[i+lz].cells[0].innerHTML = ("Oberliga " + jahr);
      else if (liga == "vl")
        tabelle.rows[i+lz].cells[0].innerHTML = ("Verbandsliga " + jahr);
      // Eine Zeile über ALLE Spalten
        tabelle.rows[i+lz].cells[0].colSpan = 11;
      // Leerzeilenzähler erhöhen.
      lz++;
    }
    // die eigentlichen Wertezeilen ausgeben.
    // "i+lz" berücksichtigt die hinzugekommenen Leerzeilen.

    tabelle.insertRow(i+lz);
    if (i == 0)
      tabelle.rows[i].bgColor = "#7aa2be";

    // Falls noch Daten im Datenarray existieren
    if((i+zMax*intOffset) < daten.length){
      for (var j = 2; j < spalten; j++)
      {
        tabelle.rows[i+lz].insertCell(j-2);
        // Falls es sich um die Überschriftzeile handelt: Datensatz an Index 0, sonst Datensatz an aktuellem Offset
        var intIndex = (i==0)? 0 : (i+zMax*intOffset);
        // Zelle mit Datensatz füllen
        tabelle.rows[i+lz].cells[j-2].innerHTML = daten[intIndex][j];
      }
    }
  }
}

Ausgehend vom Dokument erg.html muss die Variable arraySuchErg direkt im window-Kontext registriert werden, da sie sonst vom IE nicht erkannt wird.
Sollte die Variable in den anderen Dokumenten ebenfalls Verwendung finden, muss die nachfolgende Korrektur auch dort erfolgen.

<input type="button" style="width:70px; height:30px;" value="Anzeigen"
  onclick="
  var kriterien =
    'Liga=' + document.auswahl.cBoxLiga.value + ';' +
    'Sais=' + document.auswahl.cBoxSais.value + ';' +
    'Heim=' + document.auswahl.cBoxHeim.value + ';' +
    'Gast=' + document.auswahl.cBoxGast.value;
   window['arraySuchErg'] = sucheDaten(kriterien, arrayAllePlaz);
   fuelleTabelle(document, arraySuchErg);">

Ciao
Quaese