Stránkování záznamů pomocí JavaScriptu

20. listopadu 2001

•

Na žádost jednoho ze čtenářů si v tomto článku ukážeme postup, jak lze pomocí JavaScriptu docílit stránkování při výpisu více záznamů. I když se jedná o úkol, který je obvykle svěřován serverovým skriptům a databázím, lze s jistými omezeními podobnou funkčnost nasimulovat také na klientské straně.

Stránkováním záznamů je v tomto článku myšlena technika, jež se skrývá pod obvyklým nápisem v internetových obchodech či vyhledávačích: „Nalezeno 123 záznamů, zobrazuji záznamy číslo 20 až 29.“ Snad každý uživatel se internetu už se stránkováním v nejrůznějších obměnách setkal, jak je implementováno v tomto příkladu, si můžete prohlédnout zde. Pro listování mezi jednotlivými stránkami výpisu použijte odkazů v dolní části stránky.

Než se dostaneme ke skritpu samotnému, bude namístě povědět si něco o nutných omezeních, vyplývajících z použití JavaScriptu namísto skriptu serverového. Je nabíledni, že JavaScriptové vypisování záznamů nebude fungovat těm návštěvníkům, kteří mají skriptování ve svém prohlížeči vypnuto. Druhé podstatné omezení se týká toho, že abychom mohli zobrazit byť i malý malý úsek záznamů, stejně musíme prohlížeči poslat „po drátech“ záznamy všechny – bez použití serverového skriptu to jinak nelze (přesněji řečeno, jistá možnost by tu byla, viz poznámka na konci článku). Skript proto nelze použít pro případy typu „zobrazeno prvních 10 záznamů z celkového počtu 45658“ – tady už se použití serverového skriptu nevyhneme.

Pro uložení záznamů je použit objekt MoreRecords. Ten v sobě ukrývá několik členských polí pro uložení samotných dat (protože nás zde zajímá spíše implementace naž samotná data, jsou pole pojmenována neutrálně aA, aB a podobně a ani na data samotná neklademe žádná omezení). Metoda Add uvedeného objektu vkládá do členských polí data přišedší v podobě svých vstupních parametrů, metoda Write má opačnou úlohu, totiž data z členských polí vypsat do obsahu stránky. Parametry fromI a toI na vstupu metody Write určují rozsah indexů, v němž mají být data vypsána, přičemž horní parametr je ve funkci samotné ještě testován na přetečení proti skutečnému počtu záznamů v objektu. Zde je kompletní kód objektu MoreRecords:

Objekt je definován, nyní je třeba nadeklarovat jeho instanci a naplnit ji daty. Instanci pojmenujmeme pro stručnost mr, data použitá v příkladu byla inicializována takto:

var mr = new MoreRecords();
mr.Add( 12345, "Mercedes", "Světoznámé auto světoznámého výrobce" );
mr.Add( 43545, "Škoda", "Popis Škoda…." );
mr.Add( 12342, "Trabant", "Popis trabantu" );
mr.Add( 53423, "Audi", "Audi Audi Audi Audi" );
mr.Add( 76746, "Tatra", "Popis Tatra" );
mr.Add( 45776, "Peugeot", "Popis Peugeot.." );
mr.Add( 23452, "Volvo", "Volvo Volvo Volvo Volvo Volvo" );
mr.Add( 89423, "Citroen", "Co nového u citroenu" );
mr.Add( 39832, "Velorex", "Velorex cabrio" );
mr.Add( 48754, "Chevrolet", "Popis Chevrolet" );
mr.Add( 73432, "Ferrari", "Ferrari Ferrari Ferrari" );
mr.Add( 36723, "Lotus", "Popis u Lotusu" );
mr.Add( 63445, "Porsche", "Popis Porschete" );
mr.Add( 32523, "UAZ", "Slavný vůz" );

Následuje kód HTML stránky, v němž v místě, kde je potřeba záznamy zobrazit, uvedeme skript, který plní hned tři funkce. První dvě jsou uvedeny v následujícím zdrojovém kódu. Nejprve skript zjistí, jakou stránku záznamů je třeba zobrazit – protože číslo záznamu, od kterého má výpis začít, je předáváno parametrem v URL adrese, zjišťování se děje jednoduchou dekompozicí této adresy (očekává se, že stránce bude předán v URL pouze jeden parametr, pro více parametrů by bylo potřeba rozkódování v proměnné URL upravit). Za druhé pak skript zavolá výše popsanou metodu Write, čímž vypíše požadovanou „podsadu“ sady záznamů. Proměnná ONPAGE zde plní úlohu konstanty určující, kolik záznamů se má na stránku vypsat:

var ONPAGE = 5;
var URL = location.href
var i = URL.indexOf("=")
if (i != -1) {
var iFrom = 1*URL.slice(i+1)
} else {
var iFrom = 1;
}
var iTo = iFrom + ONPAGE-1;
mr.Write(iFrom,iTo);

Nakonec zbývá vypsat navigaci – tedy řádek s odkazy na ostatní dostupné stránky záznamů. Kolik stránek je dostupných, zjistíme z členské proměnné cnt objektu. Kromě přímých odkazů na stránku skript ještě případně vypisuje „trojšipky“ vlevo a vpravo, sloužící k přechodu na předchozí, respektive další stránku se záznamy:

V úvodu článku jsem se zmínil, že lze jistým způsobem obejít posílání sady všech záznamů prohlížeči. Tuto možnost skýtají vložené (include) .js soubory, kdy je teoreticky možné rozdělit rozsáhlou sadu záznamů do několika menších .js souborů a použitím jistých metod „podmíněného vložení“ posílat na klientskou stranu pouze jeden z těchto souborů. Při testech tohoto článku mi ale všechny metody podmíněného includování, které jsem vyzkoušel, připadaly implementačně složité a potencionálně nespolehlivé – zmiňuji proto tuto možnost jen pro úplnost a spoléhám se na to, že některý ze čtenářů v diskuzi k článku předvede jednoduchou a elegantní metodu JavaScriptového „podmíněného include“.

Jistého ušetření přenostu dat dosáhneme i tím, že datovou část skriptu (všechna volání mr.Add…) přemístíme do .js souboru, byť i jediného. Lze totiž počítat s tím, že slušný prohlížeč vložený soubor podrží v cache a nebude jej od serveru vyžadovat znova. V případě běžné HTML stránky je pravděpodobnost cacheování podle mne o něco menší – např. díky HTML kódům výměnných bannerových systémů a dalšího „neřádstva“, které občas musíme na svých stránkách strpět.

Domnívám se, že přes všechny výše uvedená omezení a všechna „ale“ a „nebo“ má tento skript své opodstatnění – ovšemže ne jako „hlavní vypisovač záznamů“, dovedu si ale představit, že na složitější stránce lze např. vypisování novinek či tiskových zpráv v některé z pomocných navigačních tabulek svěřit JavaScriptu a o něco tak snížit zátěž skriptů serverové strany.

Přeji vám příjemný den.