Sortering och filtrering av medelstora datamängder i ett webbgränssnitt

Titeln på den här artikeln är lång men ändå ärlig. Jag sammanfattar här några funderingar, idéer och frågeställningar gällande sortering och filtrering (sökning) i medelstora mängder information. Och det är webben, eller en del av den, som är spelplanen.

Under ett nu pågående projekt har jag ställts inför problemet med sortering och filtrering i webbgränssnitt. Det hela försvåras av att den information som ska hanteras är ganska omfattande (hundra- eller tusentals rader i databasen, beroende på hur man räknar).

Problemet

Det jag måste lösa är ett sätt att snabbt hitta information i en datamängd, utan att man förlorar överskådlighet. En ren sökfunktion i stil med Google (där man skriver in kriteria och får en lista med sökträffar) räcker inte riktigt. Jag måste kunna markera intressanta sökträffar, göra sökningen smalare genom att förkasta vissa rader (när jag skriver rad menar jag i princip en sökträff) och göra helt nya sökningar – utan att förlora kontrollen över de rader jag valt ut för vidare behandling.

Dessutom ska jag kunna sortera raderna i stigande respektive fallande ordning baserat på de kolumner som presenteras. Och allt ska gå fort, åtminstone tillräckligt fort för att användaren inte ska tröttna eller bli frustrerad.

Klurigheter, eller varför detta inte är trivialt

Den första patrull jag stöter på är att det finns mycket information att hantera, åtminstone tills man gjort ett första urval. I dagsläget tittar jag på drygt 600 rader med fem eller sex kolumner när jag gör ett en fullständig listning. Förutom detta så ligger det drygt 22.000 rader i databasen med ytterligare info som är kopplad till den som presenteras, och som ska vara sökbar.ä

Klientsidan – webbläsaren alltså – kan sortera och filtrera data på ett sätt som gör att känslan i det grafiska gränssnittet kan göras lik en vanlig skrivbordsapplikation, vilket är bra. Nackdelen är att prestandan starkt knyts till användarens dator. Vidare hindrar den (initialt) stora mängden information mig från att köra med en klientbaserad lösning rakt av, eftersom det helt enkelt inte går tillräckligt fort.

Några idéer eller lösningsskisser

Okej, jag har funderat på detta en del nu och kommit på flera idéer på lösningar av varierande kvalitet. En liten sammanställning av de alternativ jag identifierat hittills:

Läs in hela datamängden (de cirka 600 raderna) till klienten. Skicka sökkriterierna till servern med AJAX-teknik, låt den använda databassystemets kraft för att filtrera och sortera och skicka tillbaka instruktioner till klienten som förklarar hur denna ska dölja och flytta runt rader. En fördel är att man slipper skicka hela datamängden flera gånger och att alla rader alltid finns hos klienten, även om de kan vara dolda ibland. Detta gör att användaren lätt kan "stega bakåt" i filtreringen om denne skulle ha angivit för tajta kriteria. Nackdelar är bland annat att det fortfarande går för långsamt (ett experiment jag gjort visar att det tar i alla fall ett par-tre sekunder på min dator för klienten att stöka om bland 300 enklare rader även om slutordningen är känd) samt att förändringar i databasen kan missas av användaren eftersom omladdningar av data inte görs så ofta.
Låt användaren börja med en tom sida, som på Google. Visa information först när några inledande kriteria angivits. Vid det laget bör mängden sökträffar blivit hanterbart många, och klienten kan sköta sortering utan att det tar för lång tid. Alternativt skulle man kunna låta sökningen/sorteringen ske på klient respektive server beroende på mängden inladdad information. Kanske går det till och med att låta antalet förväntade sökträffar påverka metoden, även om jag inte riktigt ser hur det skulle utnyttjas.
Låt alltid servern göra urval och sortering, med utgångspunkt i kriteria som sammanställts på klientsidan. Dela upp datapresentationen i två (fysiska) delar – en yta för sökträffar och en för "sparade" rader. Användaren kan då låta servern sköta sökningen och sedan spara undan de rader som är intressanta för att sedan söka vidare med nya kriteria. Kommunikationen med servern kan ske med ett AJAX-objekt (till exempel med hjälp av biblioteket prototype) så behöver inte webbläsaren ladda om hela sidan vid varje sökning.

Det sista lösningsförslaget är det jag kommit på senast (alldeles nyss faktiskt) och verkar för mig vara det vettigaste. Kanske skulle det kombineras med det andra, så att man låter klienten sortera om det inte är för mycket information att hantera. Det som tilltalar mig mest med just detta alternativ är att man låter databasen jobba. Det är inte bara studenter på D-linjen som gillar att sortera data– även mySQL sällar sig till skaran...

Jag sätter punkt här, men kom gärna med synpunkter och kommentarer! Jag är öppen för förslag. Vi hörs!

Anders Fjeldstad
Publicerad 3 november 2005