Brauche Hilfe von erfahrenem JS Entwickler?

Hi,

ich arbeite an einem kleinen Projekt und bereue es schon seit Tagen.. Ich möchte in meinem Projekt "bootstrap datatables" verwenden. Ein bootstrap wrapper für datatables.. so dachte ich. Nach Vergleichen der beiden scripte ist mir aufgefallen, dass diese bootstrap version kaum etwas mit der originalen jquery library zu tun hat. >3000 Zeilen javascript. Das ist zu viel für mich.

Zum Problem: Eigentlich funktioniert alles bis auf einen wichtigen Punkt, und zwar die Möglichkeit, mit Hilfe der Suchzeile in ALLEN Spalten der Tabelle GLEICHZEITIG nach Einträgen suchen zu können. Sprich, ich habe folgende Spalten (Titel, Genre, Subgenre, Rating). Wenn ich in der Suchleistr ein Genre eingebe, zeigt er mir alle Einträge an denen dieses Genre zugewiesen wurde. Wenn ich dann aber dahinter mit Leerzeichen ein Subgenre zusätzlich eingebe, soll er mir nur die Einträge auflisten, die sowohl das angegebene Genre, als auch das Subgenre aufweisen. Das funktioniert prima in der originalen jquery datatable version (anscheinend aber erst seit dem letzten Release). In der bootstrap version funktioniert es nicht. Ich gebe ein "Genre" "Leerzeichen" und sobald ich dann den Anfangsbuchstaben eines Subgenres eingebe, zeigt er keine Ergebnisse mehr an. Außerdem löscht er das Leerzeichen nach ca. 1 Sekunde automatisch, wenn ich nicht schnell einen Buchstaben eingebe.

Es gab wohl einige Leute, die dem Entwickler dies vorgeschlagen haben, jedoch gibt es anscheinend keine Lösung, hab auch den Entwickler kontaktiert, aber keine Antwort seit mittlerweile über einem Monat. Wahrscheinlich sind es nur ein paar Zeilen Code, aber der js code ist mir zu komplex. Da ich auch in Stackoverflow seit Wochen keinerlei Hilfe erhalten konnte, ist dies hier meine letzte Hoffnung, bevor ich das Projekt an den Nagel hänge. Vielleicht erbarmt sich ja ein javascript Experte hier.

Meine beiden Quellcodes habe ich der Übersicht halber mal hier hochgeladen, statt sie in den Post hier zu hängen.

https://go.wetransfer.com/t-jGmy9u5iXa

Answer 1

[regex9]

Es gibt Bootstrap Table und DataTables. Beides sind unterschiedliche Erweiterungen sowohl für jQuery als auch Bootstrap.

Im besten Fall entscheidest du dich nur für eine von beiden. Hinsichtlich der Suchfunktionalität wäre wohl DataTable die richtige Wahl. Sie unterstützt ebenso das Sortieren von Spaltenwerten, die Aufteilung in Seiten oder eine individuelle visuelle Gestaltung. Schau für die Umsetzung/Aktivierung in die Dokumentation.

Comments

[Ginpanse]

richtig, aber ich würde das gerne mit bootstrap realisieren, weil man die besser designen kann.

[regex9]

@Ginpanse

Wie geschrieben handelt es sich um eine Bootstrap-Erweiterung. Schau in die Dokumentation, du kannst nach wie vor Bootstrap-Styles für die Tabelle verwenden.

[Ginpanse]

@regex9

Das weiß ich ja, das stylen der bootstrap version (Erweiterung) ist ja auch gar kein Problem.

[regex9]

@Ginpanse

Dann kann ich nicht nachvollziehen, wo noch ein Problem liegt. DataTables liefert alles, was du brauchst.

[Ginpanse]

@regex9

Liest du meine Antworten überhaupt?

[regex9]

@Ginpanse

Ja, die lese ich. Andernfalls hätte ich keine Grundlage für meine Antworten. 😉

[Ginpanse]

@regex9

wieso verstehst du dann immer noch nicht, dass datatables bereits funktioniert und das Problem bei der bootstrap erweiterung liegt und vor allem, dass ich bootstrap nutzen will wegen der besseren Styling Möglichkeiten. All das habe ich bereits geschrieben. Kennst du eine Lösung, wie man den Code von bootstrap table umschreiben kann um das Filtern in allen Spalten möglich zu machen? Falls ja wäre ich dir sehr dankbar.

[regex9]

@Ginpanse

wieso verstehst du dann immer noch nicht, dass datatables bereits funktioniert und das Problem bei der bootstrap erweiterung liegt

Das weiß ich bereits seit Schreiben meiner ersten Antwort in diesem Fragethread. Aus diesem Grund habe ich empfohlen, dass du dich für DataTables entscheidest.

(...) und vor allem, dass ich bootstrap nutzen will wegen der besseren Styling Möglichkeiten. (...)

Die Styles von Bootstrap selbst, sind wie geschrieben nach wie vor nutzbar. Falls du dich hier aber auf die Erweiterung Bootstrap-Table beziehst: Diese Erweiterung liefert ein Standarddesign und es gibt ein paar externe Themes. Ob die nicht auf DataTables / die Tabellen von Bootstrap 3/4/5 auch schon anwendbar sind oder mittels der Stylingmöglichkeiten von DataTables umgesetzt werden können, müsste spezifisch betrachtet/ausprobiert werden.

DataTables unterstützt neben den Bootstrap Styles auch das Erstellen eigener Themes oder die Nutzung vorgefertigter Kits und ist daher aus meiner Sicht viel flexibler als Bootstrap-Table.

Kennst du eine Lösung, wie man den Code von bootstrap table umschreiben kann um das Filtern in allen Spalten möglich zu machen?

In Bootstrap-Table gibt es den customSearch-Hook, mit dem du eine eigene Such-/Filterlogik vorgeben kannst. Im Gegensatz zu DataTables ist das allerdings komplizierter und somit auch mehr Aufwand, da du dir selbst darüber Gedanken machen müsstest, wie du Suchbegriffe korrekt verwertest.

[Ginpanse]

@regex9

Das mit dem customSearch hab ich mir auch schon genauer betrachtet, das Filtern mehrerer Spalten gleichzeitig ist damit aber auch nicht möglich leider. Was die vorgefertigten Kits angeht, auch die habe ich im download builder getestet, jedoch funktionieren sie nicht es kommt jedes Mal das Standard Design. Scheint ein Bug zu sein, denn das Problem haben wohl viele zur Zeit.

[regex9]

@Ginpanse

(...) das Filtern mehrerer Spalten gleichzeitig ist damit aber auch nicht möglich leider (...)

Doch, grundsätzlich ist es möglich. Die Schnittstelle liefert alle notwendigen Grundlagen, auf denen man die eigene Filterlogik mit JavaScript implementieren kann. Du hast Zugriff auf die Sucheingabe und alle Tabellenwerte. Der Rückgabewert des Callbacks entspricht dem, was die Tabelle zurückgeben soll. Das klappt auch in der aktuellen Version (1.22.1) wie erwartet.

Was die vorgefertigten Kits angeht, (...)

Bezüglich dieser Kits musst du dich an die Anbieter selbst wenden. Für deren Funktionalität übernimmt DataTables keine Verantwortung.

Bei den Kits, die über den Download Builder heruntergeladen werden können, habe ich keine Probleme feststellen können. Ich habe drei Varianten getestet (nur variierend im Styling-Framework, alle anderen Optionen auf Standard belassen):

• Default Styling mit dieser Beispieltabelle
• Bootstrap 4 mit dieser Beispieltabelle
• Bulma mit dieser Beispieltabelle

Für alle Fälle habe ich das erwartete Ergebnis erhalten. Wenn ich bei der Bootstrap-Tabelle zusätzlich Klassen wie table-dark oder table-hover setze, verändert sich das Aussehen/Verhalten der Tabelle ebenso wie erwartet.

Dein beschriebenes Problem deutet eher daraufhin, dass entweder im Browser noch veraltete Ressourcen geladen oder falsche Stylesheets verknüpft werden. Prüfe, ob die korrekte CSS-Datei in dein Dokument eingebunden wird, ob die richtigen Bootstrap-Klassen auf den Tabellenelementen gesetzt sind und leere deinen Browsercache. Ein weiterer Störfaktor könnten Markupfehler sein.