Hallo zusammen,
ich arbeite gerade an einem Big-Data-Widget, welches eine Scrollbare Liste inkl. Suche für sehr große Datenmengen clientseitig (!) ermöglichen soll.
Editierlink: http://jsbin.com/figisere/3/edit (funktioniert unter Umständen nicht richtig)
Ansichtslink: http://jsbin.com/figisere/3 (hier funktioniert das Widget)
Dazu werden die Daten in einem Array mit JavaScript-Objekten vorgehalten (Ajax soll später optional dazu kommen). Bei der Anzeige werden immer nur die Daten angezeigt, die sich gerade im sichtbaren Bereich befinden sollten.
Zum Filtern der Liste verwende ich aktuell $.grep, welches bis zu 500000 Datensätzen noch recht brauchbar funktioniert. 1 Millionen und mehr sind etwas langsam, eventuell werde ich hier noch einen Segmentierungsalgorithmus implementieren.
Um größere Datenmengen zu testen, muss man einfach die Variable "maxEntries" hochsetzen. Keine Angst vor großen Zahlen, bis 500000 sollte kein Problem sein.
Folgende Probleme treten im Moment noch auf und ich wäre dankbar für Verbesserungsvorschläge diesbezüglich:
ich arbeite gerade an einem Big-Data-Widget, welches eine Scrollbare Liste inkl. Suche für sehr große Datenmengen clientseitig (!) ermöglichen soll.
Editierlink: http://jsbin.com/figisere/3/edit (funktioniert unter Umständen nicht richtig)
Ansichtslink: http://jsbin.com/figisere/3 (hier funktioniert das Widget)
Dazu werden die Daten in einem Array mit JavaScript-Objekten vorgehalten (Ajax soll später optional dazu kommen). Bei der Anzeige werden immer nur die Daten angezeigt, die sich gerade im sichtbaren Bereich befinden sollten.
Zum Filtern der Liste verwende ich aktuell $.grep, welches bis zu 500000 Datensätzen noch recht brauchbar funktioniert. 1 Millionen und mehr sind etwas langsam, eventuell werde ich hier noch einen Segmentierungsalgorithmus implementieren.
Um größere Datenmengen zu testen, muss man einfach die Variable "maxEntries" hochsetzen. Keine Angst vor großen Zahlen, bis 500000 sollte kein Problem sein.
Code:
var unselectedEntries = [];
var maxEntries = 200;
for (var i = 0; i < maxEntries; i++) {
- Das Scrollen nach unten geschieht sehr schnell, während das scrollen nach oben etwas hakelig ist. Weiß jemand, woran das liegen könnte?
- Die Scrollbar flackert manchmal merklich, da sie bei größeren Datenmengen in der Mitte fixiert wird. Die tatsächliche Höhe der Scrollbar ist schwer darstellbar, da immer nur ein Ausschnitt gerendert wird. Weiß jemand, wie man die tatsächliche Höhe der Scrollbar simulieren könnte?
- Gibt es weitere Verbesserungsvorschläge, die die Struktur oder die Verarbeitung der Daten betreffen?
Kommentar