# dataTable + Jeditable mit JSON zum laufen bringen



## kramoo (5. Januar 2011)

Hallo,
wende mich nach zwei Tagen an euch und hoffe das sich jemand hier mit dataTable sehr gut auskennt!? 
Bekomme Jeditable nicht zum laufen. 

Die Aufgabenstellung ist das ich eine Tabelle habe die sortierbar, durchsuchbar, das man eine Zeile updaten kann, löschen und neue Hinzufügen. Das geht so weit ich gesehen habe alles mit JQuery und Datatable + Jeditable. 
Das ganze soll mittels Ajax erfolgen damit die Seite nicht immer neu geladen werden muss. Die Tabelle wird aus einer Datenbank geholt. Also würde es Sinn machen direkt mit JSON zu arbeiten und auch Datatable auf der Serverseite zu betreiben. 

Kann mir jemand dabei helfen ? Wäre sehr sehr dankbar!
Gerne auch gegen eine kleine Aufmerksamkeit.


----------



## Zack (6. Januar 2011)

Hi
hast du denn schon was versucht zu bauen? Die Sache klingt eigentlich ziemlich einfach, könntest du eventuell dein Problem konkretisieren? Ich meine das was du da willst bekommt man durch einfaches api lesen sehr schnell hin. Dann ist noch die Frage was du Serverseitig verwendest? Python, Java, Php, Ruby, .... es gibt soviele Möglichkeiten. Du solltest dich sicherlich auch mit HTML zumindest etwas auskennen.

Einfach nur mit Überlegung, Geduld und Spucke ran gehen und bei konkreten Problemen wird dir hier sicherlich geholfen. 

http://api.jquery.com/
http://www.datatables.net/api
http://www.appelsiini.net/projects/jeditable
http://json.org/

mfg Ra7or


----------



## kramoo (6. Januar 2011)

@Ra7or

Danke für deine Antwort. Muss etwas genauer werden.


Aufgabenstellung:

1: Update einer Tabellenzeile durch öffnen eines Updateformular ohne verlassen der Seite
  ( Frage? Welche Methode wäre hier die schnellste? so was wie shutterbox ? Gibt es hier was schnelles ?)

2: Nach Senden des Updateformulars sollte die Tabellenzeile und nur die Tabellenzeile aktualisiert    werden und in die Datenbank eingetragen werden. ( Am besten wahrscheinlich mittels JQuery und AJAX )

3: Neue Tabellezeile hinzufügen und in Datenbank eintragen. Gleiche Technik. Anzeigen eines Formulares und nach senden soll der neue Datensatz an erster Stelle in der Tabelle angezeigt werden.

4: Löschen einer Tabellenzeile in der Datenbank und in der Tabellenansicht ohne neuladen.


Istzustand:
Tabelle wird mit PHP und Mysql generiert und mit datatables sortierbar und durchsuchbar bereitgestellt. Das funktioniert auch schon. 

Meine Schwierigkeit ist auch zu wissen wie man das am besten löst. Ob mit shutterbox überhaupt möglich oder gibt es was besseres. Wenn mir einer den richtigen Weg nennt versuch ich den code zu schreiben.

Danke


----------



## Zack (6. Januar 2011)

Guten abend,

also ich würde folgendermaßen an die Sache ran gehen:
Ein universal Dialog(jQueryUI Dialog) mit einem Formular erstellen, was zum bearbeiten und hinzufügen von Einträgen bestimmt ist. 

Dann jeden Eintrag einen Löschen/Bearbeiten Button verpassen und einen Button zum erstellen.

Wenn jetzt der "erstellen" Button betätigt wird, wird einfach an den Server ein Request(Ajax) gesendet der einem Script sagt, "füge mir das in die Datenbank ein und sag mir ob du geschafft hast oder nicht, wenn nicht warum?". Bei Erfolg, die Tabelle erweitern, bei keinem Erfolg Fehlermeldung anzeigen.

Das ganze machst du auch noch für bearbeiten, wobei du dort halt das Formular mit den Daten aus der Tabelle füllst und die Einträge in der Tabelle bearbeitest. 

Bei löschen zeigst du einfach einen JA/NEIN Dialog mit einer Warnung. 

Das sollte es dann eigentlich sein. Das wichtigstes ist einfach nur das du jeden Datensatz auch im HTML eindeutig identifizierst, wie du das machst ist eigentlich "egal", es gibt mehrere Ansätze, wobei es eigentlich egal sein sollte wie du es machst. 

Meiner Meinung, der einfachst Weg. Man kann natürlich das Bearbeiten und Einfügen auch so gestallten das man direkt in der Tabelle bearbeiten kann oder eine Leerzeile eingefügt wird die man ausfüllen muss. Das ist aber für mein Verständnis weniger Übersichtlicher und auch schwerer zu realisieren.

mfg


----------



## kramoo (7. Januar 2011)

Genau so werde ich es machen!

Bin dabei aber auf ein Problem gestoßen wo ich nicht weiter weiß?
Habe das Updateformular auf der gleichen Seite eingebunden wo auch die Tabelle angezeigt wird. 
Das Updateformular wird dabei ausgeblendet und mittels Klick auf Update eingeblendet. Der Link bekommt noch die id mit.

Hier der Link:

```
<a href="<?php $_SERVER['PHP_SELF']?>?avzID=<?php echo $row_avzAnzeigen['avzID']; ?>">Update</a>
```

Das Formular geht auch auf aber wie schaffe ich es jetzt das beim aufgehen das Formular die Daten vom Server abfragt?

Wenn ich die Abfrage im Header einbaue geht das ja nicht weil $_GET['avzID'] ja keinen wert hat. 

Hier die Abfrage:


```
mysql_select_db($database_onemanseoDB, $onemanseoDB);
$query_avzupdate = "SELECT avzID, avzUrl  
FROM avz WHERE avzID = $_GET[avzID]";
$avzupdate = mysql_query($query_avzupdate, $onemanseoDB) or die(mysql_error());
$row_avzupdate = mysql_fetch_assoc($avzupdate);
$totalRows_avzupdate = mysql_num_rows($avzupdate);
```

Kann man das irgendwie dynamisch über JQuery lösen. Also bei klick auf Update eine AJAX verbindung aufbauen und  in das Updateformular einfügen?

Danke


----------



## Zack (7. Januar 2011)

Die erste Frage: weißt du was Ajax ist? Mir scheint das du das noch nicht genau verstanden hast! Schau dir mal genau an was der Unterschied zwischen einem Synchronen und Asynchronen Request ist und wie diese umgesetzt werden. 

Natürlich geht das mit jQuery, einfach mal in die API schauen, da steht alles sehr gut erklärt drin: http://api.jquery.com/jQuery.ajax/
Du musst halt dann alles mit Javascript zusammen bauen und dann die Antwort verarbeiten.

mfg


----------



## WayneC (29. Februar 2012)

Hallo liebes Forum


ich habe beim googlen diesen Foreneintrag entdeckt. Er ist zwar schon ziemlich veraltet jedoch hoffe ich denoch auf eine Antwort.

Mein Problem ist ähnlich dem des Beitragsstarters. Jedoch sitze ich noch auf der ersten Ebene fest. Ich benutze ebenfalls das jquery Plugin Datatables. Die Daten werden Serverseitig via php übergeben. 
Ich benutze den Quellcode aus den beispielen von 

Datatables.http://datatables.net/release-datatables/examples/server_side/server_side.html

Ich bekomme jedochimmer die Warnung : JSON data from Server could not be parsed.


Ich weis jedoch auch nicht wie ich die JSON Data mir ausgeben lassen kann ohne firebug auf das ich atm kein Zugriff habe.


Meine Frage richtet sich jetzt an Kramoo ob er mir seinen code vllt zukommen lassen könnte soweit dies möglich ist.

Bzw. ob mir einer von euch bei meinen vielen Fragen helfen kann


----------



## Zack (29. Februar 2012)

Hallo,
die Fehlermeldung weißt darauf hin das du keinen Validen JSON-String zurück gibts. Wahrscheinlich sogar mit einer Fehlermeldung(Serverseitig). Warum hast du keinen Zugriff auf Firebug? Chrome hat z.b. nen eigenen Firebug von Haus aus dabei (F12), falls du nen Chrome zur Hand hast geht das auch, oder du nimmst einfach ne Portableversion von Firefox/Chrome falls du keinen zu Hand hast. Das wäre der einfachste Weg zum schauen, vor allem auch für Später zum debuggen extrem wichtig sowas.

Alternativ kannst du auch in die Logs vom Webserver schauen ob ein Fehler auftritt oder/und dir den Responsewert einfach mal in eine Datei schreiben.

mfg


----------



## WayneC (29. Februar 2012)

Ok da ich noch nie mit Firebug gearbeitet hab entsteht an diese Stelle die nächste peinliche Frage 

Ich habe jetzt Portable Firefox + Firebug 1.9.1 genutzt jedoch finde ich da nirgendwo JSON und wie ich es betrachten kann


----------



## WayneC (29. Februar 2012)

So ich hab das jetzt doch rausgefunden. 

und den JSON rauskopiert.

Array{"sEcho":1,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[["testadmin","foo","bar","098f6bcd4621d373cade4e832627b4f6","1"],["testclient","Max","Mustermann","098f6bcd4621d373cade4e832627b4f6","2"],["testgast","Gast","Gast","098f6bcd4621d373cade4e832627b4f6","3"]]}

Also an Daten steht da alles so drinne wie es auch in der Datenbank steht

wenn ich das jetzt beim JSON Validator prüfe bekomme ich :

Parse error on line 1:
Array{    "sEcho": 
^
Expecting '{', '['

als Meldung wie kann ich nun weiter vorgehen ?


----------



## Parantatatam (29. Februar 2012)

Du muss schauen, warum vor deinem JSON-kodierten Objekt das Wort *Array* steht.


----------



## WayneC (1. März 2012)

hmm ja das ist auch so ne Sache. Ich habe an meine quellcode nichts geändert großartig. aber nun erhalte ich JSON wie folgt:

{"sEcho":1,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[["testadmin","foo","bar","098f6bcd4621d373cade4e832627b4f6","1"],["testclient","Max","Mustermann","098f6bcd4621d373cade4e832627b4f6","2"],["testgast","Gast","Gast","098f6bcd4621d373cade4e832627b4f6","3"]]}

das ist nachdem Validator ja valid. Ich habe aber trotzdem noch die gleiche Meldung wegen des Formatting errors.


Schonmal Danke für eure Hilfe


----------



## WayneC (1. März 2012)

Gut Ich habe das jetzt soweit hinbekommen das die Tabelle richtig angezeigt wird. jetzt komm der Grund warum ich eigentlich in dieses Thema eingestiegen bin:

Das einfügen von Buttons zum ändern bzw. löschen von eintragen.
Hat irgendwer erfahrungen auf dem gebiet


----------

