datatables

[Markus Franzke]

Hallo.

Hat hier jemand Erfahrung mit datatables (cdn.datatables.net) ?

Ich hätte dazu mal einige Fragen, will hier aber niemanden mit dem
Spezialproblem nerven.

M.

[Maik Koenig]

Am 07.06.2020 um 14:15 schrieb Markus Franzke:
> Hallo.
>
> Hat hier jemand Erfahrung mit datatables (cdn.datatables.net) ?

Etwas... ich habe das mal für eine private Seite benutzt. Aber frag
ruhig hier, ist ja JavaScript. Ob ich helfen kann ist ohnehin fragwürdig ;)

Greetz,
MK
--
Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!
Ich lese die Gruppen in denen ich schreibe: KEINE Mailkopie.

[Markus Franzke]

Am 10.06.20 um 04:35 schrieb Maik Koenig:

> Am 07.06.2020 um 14:15 schrieb Markus Franzke:
>> Hallo.
>>
>> Hat hier jemand Erfahrung mit datatables (cdn.datatables.net) ?
>
> Etwas... ich habe das mal für eine private Seite benutzt. Aber frag
> ruhig hier, ist ja JavaScript. Ob ich helfen kann ist ohnehin fragwürdig ;)
>
> Greetz,
> MK
>

Fein. Dann fange ich mal mit den Vorbemerkungen an.

Ich besitze eine kleine Sammlung von Hörbüchern. Dazu habe ich ein
kleines Verwaltungsscript geschrieben, das die Bearbeitung durch mehrere
Personen ermöglicht.

Zu jedem Werk existieren Informationen über Autor, Sprecher, Laufzeit,
Inhalt, was halt so bekannt ist.

Diese sind sozusagen für alle Personen (Benutzer) gültig.

Zusätzlich gibt es vier Felder (ganz unten), in denen jeder Benutzer
eigene Daten ablegen kann, wie z.B. Bewertung, Wann das letzte Mal
gehört, Wo archiviert, ... jeder, wie er will.

Die Maske ist unter http://rudi-drahtlos.de/hb-screen.png zu sehen.

Man kann in der Tabelle nach einem Werk suchen, dann werden dessen
Informationen unten in die Felder zum Bearbeiten übernommen. Direkt in
der Tabelle wollte ich nicht editieren, vor allem deshalb, weil die
Tabellenbreite lange nicht für alle Felder ausreicht.

Sobald ich in den Eingabefeldern etwas ändere, wird ein 'dirty' Flag
gesetzt. Wenn ich das Editieren nun per ABORT abbreche, kann ich per
confirm() fragen, ob das wirklich gewünscht ist. Wunderbar.

ABER: Wenn ich im Zustand 'dirty' bin, kann ich nicht verhindern, daß
ein anderer Eintrag in der Tabelle selektiert wird. Die unten
vorgenommenen Änderungen gehen stillschweigend verloren. Ich habe schon
etliche Anläufe unternommen, um 'deselect' oder 'deselect.dt' per
Eventhandler abzufangen. Mein Eventhandler wird aktiviert, aber egal was
ich zurückliefere oder ob ich e.stopImmediatePropagation() verwende, am
Ende wird der anstehende Datensatz deaktiviert und der neue aktiviert.

Also: Wie kann ich steuern, ob 'deselect.dt' und 'select.dt' von der
Tabelle behandelt - oder von mir unterdrückt werden. Es würde auch
helfen, wenn ich einfach die Tabelle temporär auf read-only setzen
könnte, damit keine Änderung an der Selektierung möglich ist, bis ich
unten entweder mit OK oder ABORT beende.

Ich hoffe, das Problem ist klar. Die Antwort würde mein Leben sehr
versüßen. ;-)

M.

[Maik Koenig]

Am 10.06.2020 um 12:25 schrieb Markus Franzke:

> ABER: Wenn ich im Zustand 'dirty' bin, kann ich nicht verhindern, daß
> ein anderer Eintrag in der Tabelle selektiert wird.

Wenn ich das richtig verstehe, dann meinst Du das so, dass der Nutzer
einen Eintrag bearbeitet und dabei aus Versehen einen anderen anklickt
und dann die schon gemachten Änderungen kommentarlos verworfen werden,
richtig?

Ich habe den Editor von Datatables nie benutzt, er war mir das Geld
einfach nicht wert. Die offensichtliche Lösung, der Editor schiebt sich
als Overlay über die Tabelle oder aktiviert zumindest ein solches
Overlay, scheidet aus?

[Markus Franzke]

Am 10.06.20 um 14:25 schrieb Maik Koenig:

> Am 10.06.2020 um 12:25 schrieb Markus Franzke:
>
>> ABER: Wenn ich im Zustand 'dirty' bin, kann ich nicht verhindern, daß
>> ein anderer Eintrag in der Tabelle selektiert wird.
>
> Wenn ich das richtig verstehe, dann meinst Du das so, dass der Nutzer
> einen Eintrag bearbeitet und dabei aus Versehen einen anderen anklickt
> und dann die schon gemachten Änderungen kommentarlos verworfen werden,
> richtig?

Genau, das ist das Problem.

>
> Ich habe den Editor von Datatables nie benutzt, er war mir das Geld
> einfach nicht wert. Die offensichtliche Lösung, der Editor schiebt sich
> als Overlay über die Tabelle oder aktiviert zumindest ein solches
> Overlay, scheidet aus?

Ich benutze den Editor von datatables nicht (wenn du das Editieren
direkt in den Zellen meinst). Hatte ich mir wohl irgendwann mal
angeschaut, muß aber ewig her sein und/oder hat mich nicht überzeugt.
Ich weiß es wirklich nicht mehr. Ist auch egal, weil nicht alle Werte
der editierbaren Felder in der Tabelle stehen (z.B. die Inhaltsangabe),
sondern erst fürs Editieren nachgeladen werden. Andere stehen unsichtbar
in der Tabelle, weil sie suchbar sein sollen (z.B. Vorleser).

Ich denke aber, daß mein Problem doch ziemlich oft auftreten dürfte,
weil sicher viele Lösungen eigene Editierfelder benutzen und so arbeiten
wie meine Funktion. Ich nehme an, du meinst mit Overlay irgendein
Element, das per z-index über der Tabelle liegt und die Events abgreift.

Hmm. Ist halt eigentlich eine Umweglösung, auch wenn man die Tabelle
dann optisch etwas abdunkeln könnte... Es muß aber doch möglich sein,
die Tabelle zeitweise dazu zu bringen, nicht auf Klicks zu reagieren,
etwa ein Attribut 'disabled' oder so.

Leider ist die Dokumentation hierzu wenig hilfreich - weder die API noch
die Beispiele.

Dir danke ich schon einmal. Vielleicht weiß ja noch jemand Rat.

M.

>
> Greetz,
> MK
>

[Maik Koenig]

Am 10.06.2020 um 15:37 schrieb Markus Franzke:

> Ich benutze den Editor von datatables nicht (wenn du das Editieren
> direkt in den Zellen meinst). Hatte ich mir wohl irgendwann mal
> angeschaut, muß aber ewig her sein und/oder hat mich nicht überzeugt.
> Ich weiß es wirklich nicht mehr. Ist auch egal, weil nicht alle Werte
> der editierbaren Felder in der Tabelle stehen (z.B. die Inhaltsangabe),
> sondern erst fürs Editieren nachgeladen werden. Andere stehen unsichtbar
> in der Tabelle, weil sie suchbar sein sollen (z.B. Vorleser).

Das wäre für den Editor egal, der ist, was die Anzeige der Felder
betrifft, nicht von den Optionen für Datatables abhängig sondern kann
getrennte Vorgaben verarbeiten.

> Ich denke aber, daß mein Problem doch ziemlich oft auftreten dürfte,
> weil sicher viele Lösungen eigene Editierfelder benutzen und so arbeiten
> wie meine Funktion. Ich nehme an, du meinst mit Overlay irgendein
> Element, das per z-index über der Tabelle liegt und die Events abgreift.

Richtig.

> Hmm. Ist halt eigentlich eine Umweglösung, auch wenn man die Tabelle
> dann optisch etwas abdunkeln könnte... Es muß aber doch möglich sein,
> die Tabelle zeitweise dazu zu bringen, nicht auf Klicks zu reagieren,
> etwa ein Attribut 'disabled' oder so.

Wenn ich die Doku richtig verstehe (ich habe nur kurz gesucht) dann ja:
https://datatables.net/reference/api/off()

Damit kann man nach meinem Verständnis z.B. den listener für select
abschalten. Was, abhängig davon wie Du deinen Editor integriert hast,
dein Problem ja lösen würde. Sobald der Editor lädt den listener
abschalten und wieder aktivieren wenn er beendet wurde.

Aber aus Usersicht: Es ist immer eine gute Idee dafür eine optische
Rückmeldung zu geben. Also entweder ein Overlay über die Tabelle legen
oder mindestens per CSS den Mauszeiger beim hovern über der Tabelle
entsprechend anzeigen, z.B. als "not-allowed". Man könnte noch ein
kleines Popup an den Mauszeiger binden mit dem Hinweistext "Editor
aktiv" oder ähnliches...

[Markus Franzke]

Am 10.06.20 um 18:48 schrieb Maik Koenig:

Super. Das mit off() überprüfe ich gleich mal. Muß ich überlesen haben.

Die ganze Optik ist noch unfertig. Viele Dinge werden wegfallen oder
anders aussehen, aber die Funktionalität der Tabelle muß halt da sein.

Ich berichte noch.

M.

[Markus Franzke]

Am 10.06.20 um 19:10 schrieb Markus Franzke:

>
> Super. Das mit off() überprüfe ich gleich mal. Muß ich überlesen haben.
>
> Die ganze Optik ist noch unfertig. Viele Dinge werden wegfallen oder
> anders aussehen, aber die Funktionalität der Tabelle muß halt da sein.
>
> Ich berichte noch.
>
> M.

Ergebnis: Schade. Mit .off() kann man offenbar nur zuvor eingehängte
Handler wieder entfernen. Mein Eventhandler für deselect.dt soll aber
immer vorhanden sein und jeweils prüfen, ob 'dirty' vorliegt und falls
ja, den Event unterdrücken und den Wechsel der Selektion verhindern.
Natürlich mit einer Frage per confirm().

Die Suche geht also erstmal weiter.

M.

[Maik Koenig]

Am 10.06.2020 um 19:55 schrieb Markus Franzke:

> Ergebnis: Schade. Mit .off() kann man offenbar nur zuvor eingehängte
> Handler wieder entfernen. Mein Eventhandler für deselect.dt soll aber
> immer vorhanden sein und jeweils prüfen, ob 'dirty' vorliegt und falls
> ja, den Event unterdrücken und den Wechsel der Selektion verhindern.
> Natürlich mit einer Frage per confirm().

Bevor ich jetzt suche... wie genau arbeitet deine Seite? Du klickst auf
eine Zeile und der Editor öffnet sich? Wenn ja: Wie bekommst Du dieses
Event? Hast Du ausser Datatables noch andere Scripte aktiv? Wie
interagieren die mit Datatables? Ist der Editor eine komplett eigene
Entwicklung, wie wird der aufgerufen? Es wäre ja einfach den Editor
eventuelle Aufrufe ignorieren zu lassen wenn noch dirty vorliegt.

[Maik Koenig]

Am 10.06.2020 um 20:22 schrieb Maik "Ingrid" Koenig:

> Bevor ich jetzt suche...

Man könnte auch schlicht für die Tabelle bei aktivem Editor

pointer-events: none;

setzen. Mein Firefox unterstützt das zumindest korrekt.

[Markus Franzke]

Am 10.06.20 um 20:22 schrieb Maik Koenig:

> Am 10.06.2020 um 19:55 schrieb Markus Franzke:
>
>> Ergebnis: Schade. Mit .off() kann man offenbar nur zuvor eingehängte
>> Handler wieder entfernen. Mein Eventhandler für deselect.dt soll aber
>> immer vorhanden sein und jeweils prüfen, ob 'dirty' vorliegt und falls
>> ja, den Event unterdrücken und den Wechsel der Selektion verhindern.
>> Natürlich mit einer Frage per confirm().
>
> Bevor ich jetzt suche... wie genau arbeitet deine Seite? Du klickst auf
> eine Zeile und der Editor öffnet sich? Wenn ja: Wie bekommst Du dieses
> Event? Hast Du ausser Datatables noch andere Scripte aktiv? Wie
> interagieren die mit Datatables? Ist der Editor eine komplett eigene
> Entwicklung, wie wird der aufgerufen? Es wäre ja einfach den Editor
> eventuelle Aufrufe ignorieren zu lassen wenn noch dirty vorliegt.
>
> Greetz,
> MK
>

Die Editorfelder stehen immer da, weil sie bei Durchblättern in der
Tabelle jeweils auf die Inhalte zur selektierten Zeile aktualisiert
werden. Der 'Editor' wird also nicht irgendwie gestartet oder geöffnet.

Es ist in dem Sinne kein 'Editor', sondern einfach 16 + 1 + 4
Inputfelder, die je nach Selektion gefüllt oder geleert werden.

Du kannst gerne mal mit der Testinstallation rumspielen.

http://doomster.nethonks.de/HB/web/index.html gast/ug

Kaputtmachen kannst du dabei nichts. Ich überschreibe demnächst alles
mit dem Stand von daheim.

Es ist ein recht altes, unerledigtes Projekt von mir. Die .js Sourcen
sind nicht die aktuellen, aber das Handling dürfte klar werden. Es gab
in den diversen datatables Releases einige Änderungen, die sich in
Resten im Script widerspiegeln. Viel Müll...

Die Buttons werden noch per CSS gruppiert und dann gruppenweise
(de)aktiviert. Ist aber alles nicht vorrangig.

Wenn man einen Eintrag selektiert hat, wird deren Kram in die
Eingabefelder geladen. Erst wenn man dann EDIT benutzt, werden die
Eingabefelder änderbar. Ein Wechsel der Selektion ist aber erst dann
problematisch, wenn mindestens eine Änderung zu einem 'dirty' geführt
hat. Vorher stört es den Betrieb ja nicht. Erst bei 'dirty' muß entweder
bei ABORT oder Wechsel der Selektion nachgefragt werden.

Bei ADD merkt man nicht sofort, daß die Eingabefelder nun änderbar sind.

Kommt alles noch. :-)

M.

[Markus Franzke]

Am 10.06.20 um 20:22 schrieb Maik Koenig:

> Am 10.06.2020 um 19:55 schrieb Markus Franzke:
>
>> Ergebnis: Schade. Mit .off() kann man offenbar nur zuvor eingehängte
>> Handler wieder entfernen. Mein Eventhandler für deselect.dt soll aber
>> immer vorhanden sein und jeweils prüfen, ob 'dirty' vorliegt und falls
>> ja, den Event unterdrücken und den Wechsel der Selektion verhindern.
>> Natürlich mit einer Frage per confirm().
>
> Bevor ich jetzt suche... wie genau arbeitet deine Seite? Du klickst auf
> eine Zeile und der Editor öffnet sich? Wenn ja: Wie bekommst Du dieses
> Event? Hast Du ausser Datatables noch andere Scripte aktiv? Wie
> interagieren die mit Datatables? Ist der Editor eine komplett eigene
> Entwicklung, wie wird der aufgerufen? Es wäre ja einfach den Editor
> eventuelle Aufrufe ignorieren zu lassen wenn noch dirty vorliegt.
>
> Greetz,
> MK
>

Ich probiere gerade mit Select 'api' Betriebsart herum.

Dann reagiert die Tabelle nur noch auf Select/Deselect, die von meinen
Funktionen her stammen. Ich muß lediglich noch aus dem CLICK Event die
Tabellenzeile gewinnen.

M.

[Maik Koenig]

Am 10.06.2020 um 20:57 schrieb Markus Franzke:

> Wenn man einen Eintrag selektiert hat, wird deren Kram in die
> Eingabefelder geladen. Erst wenn man dann EDIT benutzt, werden die
> Eingabefelder änderbar. Ein Wechsel der Selektion ist aber erst dann
> problematisch, wenn mindestens eine Änderung zu einem 'dirty' geführt
> hat. Vorher stört es den Betrieb ja nicht. Erst bei 'dirty' muß entweder
> bei ABORT oder Wechsel der Selektion nachgefragt werden.

Du hast letztlich zwei Eventlistener aktiv: Einen für das Selektieren
einer Zeile (Zeile 500ff in der index.html) und einen für das
Deselektieren einer Zeile (Zeile 514ff in der index.html).

Man will einen Eintrag bearbeiten und klickt dann aus Versehen auf eine
neue Zeile. Damit wird aber zwangsweise per "eingabefelder_laden();" der
Editor neu befüllt. Vollkommen unabhängig davon, ob der Evenlistener für
Deselektion das abfangen soll oder nicht. Anders gesagt: Eigentlich
steht deine Sicherheitsabfrage (confirm...) in der falschen Funktion.
Denn der Editor wird ja bei "select" neu befüllt...

Oder habe ich da einen Denkfehler?

[Markus Franzke]

Am 10.06.20 um 22:09 schrieb Maik Koenig:

> Am 10.06.2020 um 20:57 schrieb Markus Franzke:
>
>> Wenn man einen Eintrag selektiert hat, wird deren Kram in die
>> Eingabefelder geladen. Erst wenn man dann EDIT benutzt, werden die
>> Eingabefelder änderbar. Ein Wechsel der Selektion ist aber erst dann
>> problematisch, wenn mindestens eine Änderung zu einem 'dirty' geführt
>> hat. Vorher stört es den Betrieb ja nicht. Erst bei 'dirty' muß entweder
>> bei ABORT oder Wechsel der Selektion nachgefragt werden.
>
> Du hast letztlich zwei Eventlistener aktiv: Einen für das Selektieren
> einer Zeile (Zeile 500ff in der index.html) und einen für das
> Deselektieren einer Zeile (Zeile 514ff in der index.html).
>
> Man will einen Eintrag bearbeiten und klickt dann aus Versehen auf eine
> neue Zeile. Damit wird aber zwangsweise per "eingabefelder_laden();" der
> Editor neu befüllt. Vollkommen unabhängig davon, ob der Evenlistener für
> Deselektion das abfangen soll oder nicht. Anders gesagt: Eigentlich
> steht deine Sicherheitsabfrage (confirm...) in der falschen Funktion.
> Denn der Editor wird ja bei "select" neu befüllt...

Das Problem ist, daß - egal was die Eingabefelder machen - die Tabelle
die neue Zeile selektiert, und ich das _so_ nicht unterbinden kann.

Ich probiere jetzt erstmal eine Weile mit Select 'api' herum. Das
scheint mir das Erfolgversprechendste zu sein.

Sorry, irgendwie kann ich mich mit javascript nicht anfreunden.

Ich programmiere einfach schon zu lange (seit 1979)...

Danke erstmal.

M.

[Maik Koenig]

Am 10.06.2020 um 22:16 schrieb Markus Franzke:

> Das Problem ist, daß - egal was die Eingabefelder machen - die Tabelle
> die neue Zeile selektiert, und ich das _so_ nicht unterbinden kann.

Äh... zumindest in der Demoversion versuchst Du es nichtmal. Du brichst
den Event nicht ab. Du versuchst das Deselektieren abzubrechen, aber das
Selektieren läuft so oder so durch.

[Markus Franzke]

Am 10.06.20 um 22:35 schrieb Maik Koenig:

> Am 10.06.2020 um 22:16 schrieb Markus Franzke:
>
>> Das Problem ist, daß - egal was die Eingabefelder machen - die Tabelle
>> die neue Zeile selektiert, und ich das _so_ nicht unterbinden kann.
>
> Äh... zumindest in der Demoversion versuchst Du es nichtmal. Du brichst
> den Event nicht ab. Du versuchst das Deselektieren abzubrechen, aber das
> Selektieren läuft so oder so durch.
>
> Greetz,
> MK
>

Ich hatte irgendwie angenommen, daß das erfolgreiche Deselektieren die
Voraussetzung für das Neu-Selektieren ist.

Danke für den Hinweis.

Ich melde mich wieder, wenn ich hier daheim etwas zustandegebracht haben
werde. :-)

Insgesamt scheint mir die Betriebsart Select 'api' erfolgversprechender
zu werden als die Betriebsart 'single'.

Danke und Gute Nacht.

M.

[Markus Franzke]

Am 10.06.20 um 22:35 schrieb Maik Koenig:

> Am 10.06.2020 um 22:16 schrieb Markus Franzke:
>
>> Das Problem ist, daß - egal was die Eingabefelder machen - die Tabelle
>> die neue Zeile selektiert, und ich das _so_ nicht unterbinden kann.
>
> Äh... zumindest in der Demoversion versuchst Du es nichtmal. Du brichst
> den Event nicht ab. Du versuchst das Deselektieren abzubrechen, aber das
> Selektieren läuft so oder so durch.
>
> Greetz,
> MK
>

Hallo, Maik.

Die Lösung mit dem 'api' Modus von Select war richtig.

Man kann dann nur per Funktionen selektieren und deselektieren.

Also muß man nur 'click' abfangen, die Zeile ermitteln und kann dann je
nach Situation von confirm(), 'dirty' und 'betriebsart' frei agieren.

Tastaturbenutzung muß ich irgendwann mal überdenken (tab-index usw.).

Ist noch nicht komplett durchgetestet, sieht aber brauchbar aus. Wenn du
magst, kannst du ja nochmal damit rumspielen. Ich lasse den Gastaccount
vorerst bestehen.

Nun muß ich nur noch optisch darauf hinweisen, daß der Editor aktiv ist.

Ja. ich weiß, dann lande ich wieder bei deinen Overlays. Ich wollte das
Problem aber so lösen, weil ich es auch an anderer Stelle verwenden muß.

Das Plazieren eines Elementes über der Tabelle bedeutet:
- Größe ermitteln
- Position ermitteln (Scrollposition etc berücksichtigen)
- Element erzeugen und an gleicher Position darüber legen

Hast du da zufällig ein Beispiel ?

Ich muß mir nämlich jedes Fitzelchen immer erst raussuchen ...

Auf jeden Fall : Vielen Dank.

M.

[Maik Koenig]

Am 11.06.2020 um 14:37 schrieb Markus Franzke:

>
> Nun muß ich nur noch optisch darauf hinweisen, daß der Editor aktiv ist.
> Ja. ich weiß, dann lande ich wieder bei deinen Overlays.

Nicht unbedingt. Du könntest auch einfach kleine CSS-Tricks nutzen. Also
z.B. den Cursor innerhalb der Tabelle auf "progress" oder gar
"not-allowed" setzen. Oder mittels opacity die Deckkraft reduzieren,
z.B. auf 0.4. Letzteres hätte den Vorteil, dass es auch bei
Touchbedienung sichtbar wäre. Beides lässt sich recht simpel per
JavaScript den CSS-Eigenschaften der Tabelle hinzufügen und wieder
entfernen. Und beides würde trotzdem normale Mausklicks erlauben. Da Du
die ja abfängst wäre alles OK.

[Markus Franzke]

Am 11.06.20 um 15:26 schrieb Maik Koenig:

> Am 11.06.2020 um 14:37 schrieb Markus Franzke:
>
>>
>> Nun muß ich nur noch optisch darauf hinweisen, daß der Editor aktiv ist.
>> Ja. ich weiß, dann lande ich wieder bei deinen Overlays.
>
> Nicht unbedingt. Du könntest auch einfach kleine CSS-Tricks nutzen. Also
> z.B. den Cursor innerhalb der Tabelle auf "progress" oder gar
> "not-allowed" setzen. Oder mittels opacity die Deckkraft reduzieren,
> z.B. auf 0.4. Letzteres hätte den Vorteil, dass es auch bei
> Touchbedienung sichtbar wäre. Beides lässt sich recht simpel per
> JavaScript den CSS-Eigenschaften der Tabelle hinzufügen und wieder
> entfernen. Und beides würde trotzdem normale Mausklicks erlauben. Da Du
> die ja abfängst wäre alles OK.
>
> Greetz,
> MK
>

Schon wieder : Danke.

Das mit der CSS Lösung werde ich angehen.

Meine Schwierigkeit bei der ganzen Sache hier ist der Zusammenhang
zwischen den jQuery Objekten und den DOM Elementen. Ist irgendwie recht
stressig, vor allem, wenn man mit einem leichten Widerwillen daran geht.

Schönen Feiertag noch.

M.