Tabelleninhalt Seitenweise mit Ajax aufbauen

M

matzseesi

Erfahrenes Mitglied
Hi Leute,

Ich habe eine Frage bezüglich Aufbau eines Tabelleninhalts mit Asynchronen Anfragen.
Ich möchte Daten aus einer Datenbank (7 Spalten und etliche Einträge) in HTML visualisieren.
Dabei sollen pro Seite maximal 20 Zeilen ausgegeben werden und das Blättern wird mit Ajax realisiert. dh. Er lädt mir beim Klick auf die jeweilige Seite einfach die dazugehörigen 20 Einträge nach.

Würdet ihr die Tabelle also die Struktur mit <tr><td></td><td></td>.....</tr> usw... mit JavaScript aufbauen oder einfach schon beim ersten laden der Seite eine Tabelle mit 20 Zeilen laden und diese dann jeweils füllen! Das problem hierbei ist allerdings, was mache ich auf der letzten Seite wenn es nur mehr z.b.: 12 Einträge gibt?!

Meine Lösung bisher war einfach mit PHP die 20 Zeilen erstellen und anschließend per Ajax die Zeilen füllen. Funktioniert auch prächtig. Jedoch irgendwie bin ich nicht ganz glücklich mit dieser Lösung.

Diesen Zwiespalt zwischen aufbau der visualisierung Serverseitig oder eben Clientseitig habe ich mehrmals! Was ist hier sinnvoller? Wie machen es die Profis?

Gruß

Matz
 
Hi,

ich würde dir zwei Alternativen vorschlagen:
- Der Ajax-Response kommt ja sicher auch dynamisch zustande, also kannst du dir da die Tabelle in PHP zusammenbasteln.
- Oder aber in JS, mit den Daten des Responses. Allerdings würde ich dann erst das alte Tabellenelement löschen und mir per JS eine neue Zusammenbauen. (Mit Schleife und DOM-Funktionen)

Ich würde aber die erste Alternative bevorzugen. Ist sicherlich performanter.

Gruß

.:lay-z-cow:.
 
Hallo,

Bei der ersten Methode lade ich halt wesentlich mehr Zeichen nach!
Dh. falls ich es mit Ajax mache, hole ich mir die Daten, erstelle mir die Tabelle in JS je nachdem wieviel Zeilen (Anzahl bekomme ich ja durch das holen der Daten) und anschließend fülle ich die Tabelle mit den Daten.

Ich würde eben gerne wissen wie es Profis machen die wesentlich größere Applikationen erstellen! An und für sich ist Ajax dazu da nur mehr Rohdaten zu übertragen. Das heißt, dass ich beim ersten laden der Seite hauptsächlich das Grundesign und die ganzen JS Skripts lade und ab dann nur mehr Ajax Requests zum laden der Rohdaten und füllen der Tabelle durchführe oder?
 
Hake mich mal hier ein : Habe auch Tabellen darzustellen, mache es bis Dato statisch mit jedem Aufruf/Refresh der Seite mittels PHP.

Hat jemand ein Tutorial für die AJAX-Umsetzung ? Einfach so ein Newbie-Tutorial.

mfg chmee - betreffende Seite -> bf2.phreekz.de
 
Hi,
ich persönliche finde das "wiederauffüllen" einer statischen Tabelle nicht gut. Es ist auch nicht besonders flexibel.

Wenn du nur Rohdaten senden willst, würde ich mit JSON arbeiten (wg. besserer Strukturierung -> Abarbeitungsmöglichkeiten) und dann nach dieser Struktur die Tabelle jedes mal per JS neu bauen.

Du könntest dir auch vorgefertigte Lösungen, wie z.B. http://developer.yahoo.com/yui/datatable/ ansehen.

Gruß

.:lay-z-cow:.
 
Hallo,

JSON verwende ich bereits. und das funktioniert super! ist auch meiner Meinung die schönste Variante nur ist es relativ schwierig in JS eine Tabelle zu bauen wenn man nicht fundiertes JS wissen besitzt.
Wenn ich jedes mal die Tabelle samt daten nachlade könnte ich doch gleich iframes verwenden nicht?
Aber wie bereits erwähnt ist das nur meine Meinung.

@chmee: Hab mir ein Buch gekauft und darin erstmal die Grundlagen zu Ajax etwas durchgelesen. Anschließend hab ich mich mit Prototype durchgekämpft => einfach und effektiv. http://www.prototypejs.org

Gruß
 
Naja das kann man nun schwer sagen wie das ablaufen soll bzw was die Tabelle können soll.
Soll es nur die Daten anzeigen ? da kannst eigentlich auch jedes mal gleich nen Request rüber senden und die ganze Tabelle neu einbinden über innerHTML.

Andernfalls hat man eben die Alternative das Clientseitig zu machen. Aber das wäre auch nen Umweg in meinen Augen.

Ziehe dir 20 Datensätze und nun füge sie alle in die Tabelle ein , kann man auch gleich die ganze Tabelle rüber schubsen.

Soll man eine Suche und filtern ? Dann wäre es zum Beispiel von Vorteil sich erstmal alle Daten die in Betracht zu ziehen sind zu laden und beim Client zu speichern in Form eines Arrays oder Objektes. Und die Tabelle dann zu befüllen bzw neu aufzubauen jedes mal.Wird sich beides nicht viel nehmen denk ich , mit einen Vorteil bei dem neu befüllen ist sie halt schon die ganze Zeit da man muss nur noch die Daten reinschubsen spart eventuell nen bissel Arbeit.

Sortieren würde ich auch ähnlich abhalten das man sich die Daten die im Moment in Betracht gezogen werden können für die 1 Seite läd und diese Tabelle dann einfach neu befüllt immer , wobei es dann hässlich wird das Objekt das die Daten enthält zu sortieren fände ich dann aber besser als die komplette Tabelle immer neu aufzubauen.

Ist je nach Umfang und Funktionalität zu entscheiden würde ich behaupten.Nur anzeigen das ist statisch gleich die komplette Tabelle mit Daten in PHP zusammen bauen und dann nur noch einbinden andernfalls würde ich die Tabelle dann über JS befüllen dann lässt sie sich leichter handeln.
 
Hi,
das befüllen immer der selben Tabelle bringt aber auch einige Nachteile mit sich, bspw:
* Wenn es weniger als 20 Zeilen sind (letzte Seite) - leere Felder
* Wenn du irgendwann den Nutzer die Zeilenanzahl bestimmen lassen willst
* Hübsche Ajax-Löschfunktionen ;) - Per Ajax Datensatz löschen und dabei per JS hübsch ausfaden lassen -> dann is aber die entspr. Zeile weg.
* Andere Markierungsfunktionen etc. am dem Daternsätzen müssen immer zurückgesetzt werden. (kann auch leicht eine Fehlerquelle sein)
* Du hast in deinem JSON-Objekt schon die komplette benötigte Tabellenstruktur automatisch drin (zumindest könntest du das haben) -> warum das dann in eine statische Tabelle schreiben und dadurch trotzdem am HTML rumschrauben müssen, wenn z.B. ein Feld in der DB hinzukommt?

Ich würde die Tabelle dynamisch erstellen lassen. Mit ein paar PHP bzw. JS-Funktionen sollte das kein Problem sein (je nachdem, was du bevorzugst). Wenn du Ajax nur für Rohdaten nutzen willst, nimm halt JS.


Gruß

.:lay-z-cow:.
 
Zuletzt bearbeitet:
Hi Leute,

Habe nun den Aufbau der Tabelle fertig.
Habe mich für folgende Methode entschieden:
1.) die Daten werden per ajax nachgeladen
2.) alle Reihen werden geloescht
3.) reihen werden mit folgendem Code wieder aufgebaut und gleich befuellt

Würde mich auf eine kurze Rückmeldung freuen was ihr von der Methode und Implementierung haltet! Verwende Prototype als JS Framework...

Gruß Matz

Code: 
function createRow( tbodyElement, tdata )
{
   tr = document.createElement("tr");
   tr.id = tdata.id;
   tr.onclick = showData;
   tr.onmouseover = highlightLine;
   tr.onmouseout = unhighlightLine;
   newTr = tbodyElement.appendChild( tr );
        
   for( ii=0; ii<6; ii++ )
   {
     td = document.createElement("td");
     if( ii % 2 == 0 ) td.setStyle({ color:'#4a4a4a',backgroundColor:'#9a9a9a' });
     if( ii % 2 != 0 ) td.setStyle({ color:'#4a4a4a',backgroundColor:'#c1c1c1' });
     if( ii == 0 ) {
       img1 = document.createElement("img");
       img1.src = tdata.url;
       td.appendChild( img1 );
       td.setStyle({ height:'25px',textAlign:'center' }); }
     if( ii == 1 ) {
       img2 = document.createElement("img");
       img2.src = tdata.icon;
       td.appendChild( img2 ); 
       td.setStyle({ textAlign:'center' }); }
     if( ii == 2 ) {
       span1 = document.createElement("span");
       span1.setStyle({ fontsize:'11px', fontweight:'600' });
       span1.update( tdata.test1 + ' / ' );
       td.appendChild( span1 );
       span2 = document.createElement("span");
       span2.setStyle({ fontsize:'11px' });
       span2.update( tdata.test2 + '<br/>' );
       td.appendChild( span2 );
       span3 = document.createElement("span");
       span3.setStyle({ fontsize:'10px' });
       span3.update( tdata.test3 );
       td.appendChild( span3 );
       td.setStyle({ padding:'2px' }); }
     if( ii == 3 ) {
       span1 = document.createElement("span");
       span1.setStyle({ fontsize:'10px' });
       span1.update( tdata.test4 + ' ' );
       td.appendChild( span1 );
       span2 = document.createElement("span");
       span2.setStyle({ fontsize:'11px', color:'#3a3a3a' });
       span2.update( tdata.test5 + '<br/>' );
       td.appendChild( span2 );
       span3 = document.createElement("span");
       span3.setStyle({ fontsize:'10px' });
       span3.update( tdata.test6 );
       td.appendChild( span3 );
       td.setStyle({ padding:'2px' }); }
     if( ii == 4 ) { td.update( tdata.count ); td.setStyle({ textAlign:'center' }); }
     if( ii == 5 ) { td.update( tdata.hits ); td.setStyle({ textAlign:'center' }); }

     newTr.appendChild( td );
   }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück