DataTables v 3IT

Znáte datatables.js? Javascriptovou knihovnu pro generování interaktivních tabulek, která umožní zobrazená data řadit, filtrovat a stránkovat? My s ní pracujeme téměř osm let, postavili jsme na ní veškeré výpisy dat v administraci našich e-shopů a přišel správný čas za všechnu práci na tomto systému naše programátory pochválit.

Na počátku byla <table>. Html značka, která zajistí, že se řádky a sloupce naplněné daty zobrazí v prohlížeči pěkně úhledně jako v Excelu. Zatímco Excel má přesně kvaziliondvacetčtyři funkcí, které umožní s daty pracovat, <table> v prohlížeči umí data hlavně zobrazovat… vlastně jen zobrazovat. Aby bylo možné s daty v prohlížeči pracovat, aby v nich uživatel mohl vyhledat, označit nebo seřadit, zkrátka aby byla data jakkoliv interaktivní, museli jsme je to naučit programováním.

I v dávných dobách druhointernetových, kdy se v tabulkách tvořily celé weby a ajax bylo divné slovo z americké učebnice, existovaly pokusy jak interaktivitu uživatelům doručit, ale upřímně… na tu dobu raději nevzpomínejme. :Dnes se při vývoji webů snažíme, aby byly uživatelsky přívětivé a o tabulkách, které umožňují pracovat s miliony řádků, to platí tím víc. Jsme rádi, že se nám v 3IT povedlo udržet trend a naše DataTables jsme v ohledu vývoje nezanedbávali.

Vykreslovat tabulku s daty je jedna věc. Předat tabulce data, která jsou uložena v databázi stovky kilometrů daleko od uživatele, je věc druhá (já vím, já vím, v internetovém světě je to jen pár milisekund). Naše řešení jsme vyvíjeli pozvolna podle potřeb našich klientů, všechny funkce, správně integrované do našich DataTables, nám za celý čas ušetřily stovky (zřejmě i přes tisíc) hodin práce.

Poslední verze našeho řešení umožní programátorovi vytvořit tabulku jako na obrázku za 47 sekund (testováno v kancelářích podnikatelského inkubátoru v Ostravě).

Programátor musí definovat jaké sloupce zobrazit s jakým filtrem a z jakého místa v databázi načíst data. Sedm řádků kódu. Zbytek práce odvede systém samotný. Ten zajistí, že se u některých sloupců zobrazí možnost filtrovat výběrem v rozbalovací nabídce, u jiných filtrovat textem nebo vůbec. Zajistí možnost sloupce řadit, nastaví výchozí řazení, spočítá počet stran, nastaví správnou stranu, dovolí některé sloupce skrýt a umožní procházet daty bez nutnosti obnovovat stránku. Upřímně… tímto ale díru do světa neuděláme. Tohle je jistě docela běžné. Ačkoliv jsme v administracích bývalých e-shopů našich klientů, než začali spolupracovat s námi, viděli velmi nepěkná řešení (a tím myslím VELMI nepěkná řešení), vím, že v jiných administracích lze najít systémy obdobné.

V DataTables samozřejmě neumíme jen to – zobrazit šest sloupců. Ty důvody, proč si všichni, kdo systém vyvíjeli, zaslouží uznání, je, že nám naše tabulky dovolují vyřešit všechny tužby našich klientů vždy jen s minimem zbytečného psaní. Právě na tom si zakládáme. Vždy jen pár řádků programového kódu nám dovoluje naučit tabulku

• vykreslovat různé typy sloupců: číselné, částky s měnou, odkazy, obrázky, libovolné hodnoty a další
• provádět nad zobrazenými daty hromadné operace
• zobrazovat všechna data na jedné stránce
• skrývat filtry, upravovat způsoby filtrování
• měnit počty řádků na stránce
• řadit data pozpátku
• provádět systémové operace před a po zobrazení dat
• měnit vzhled
• skrývat a zobrazovat sloupce
• načítat data jen když si to uživatel přeje, pro zkrácení doby načítání stránek
• propojit data se složitými databázovými strukturami
• automaticky generovat propojení s těmito databázemi
• pamatovat si u každého uživatele parametry, které si v tabulce nastavil
• a tím to určitě nekončí..

Dále pár technických slov

Abych zaslouženě vysvětlil, co všechno naši kluci dokázali, dovolím si vypsat chování tabulky tak, jak si ji vedeme v naší interní wiki:

Pro zobrazení tabulky je potřeba vytvořit instanci třídy DataTable (DT), tu vykreslit přes funkci render v latte šabloně. DT má připravenu abstraktní funkci prepareTable, ve které se předpokládá příprava sloupců skrze funkce addSelect, addNumber, addPrice atd. Příprava sloupců umožňuje definovat, jaké sloupce se v jakém pořadí zobrazí. Je možné určit jak sloupce budou široké, jestli budou filtrovatelné, řaditelné a jak se budou zobrazovat buňky ve výpise tabulky.

DT je připravena pro práci s mysql databází. Ve střevech se téměř všechny definice v prepareTable nakonec překládají do určité části sestavovaného sql dotazu. Při zobrazení dat z jediné sql tabulky je možné pro plnou funkčnost definovat jen jméno tabulky. Při potřebě složitějších dotazů (joinů, omezení částí tabulky atp.) je možné jak u sloupců, tak u celé tabulky, určit způsob propojení s db.

Z důvodů optimalizací může být nežádané sestavovat tabulku z mnoha joinů, left joinů, unionů atp. Pro řešení jsou připraveny tzv. preparators, které umožňují tabulce určit callbacky volané ve správnou chvíli po zisku dat z databáze. Veškeré left joiny, které by mohly způsobit optimalizační problémy, je možné přesunout do preparatorů a potřebná data získat jen k právě zobrazeným datům (po uplatnění stránkování, řazení a filtrace). Při sestavování dotazů je možné zjistit, zda jsou některé sloupce filtrovány, a joinovat tabulky jen, když je to potřeba.

Nastavení hromadných operací umožňuje zobrazit v patičce tabulky selectbox s definovanými operacemi. Po aktivaci hromadných operací je možné skrze checkboxy volit řádky, nad kterými se má hromadná operace provést.

Popsaná funkčnost je spojena s funkcemi addColumn, addText, addSelect atd, getQuery, getCount, setTableName, setAutogenerateSelect, createMass, setOnPage, setPrimaryName, disablePaging, setOnPageSelect, setReversed, disableFilters, enableGlobalSearch, setFilterValue, setDefaultOrder, setAutogenerateSelect, setTableName, addPreparator, addAlert, addInfo, setHidden, setWidth, setAlign, addClass, setFormatter, setAlign, setNoWrap, addClass, setOrderable, setFilterExact, setFilterRange, setPlaceholder, setDefaultFilter, setSearchable, setData, setAlias, setFilterCallback, addClass.

Takže už naposledy: Děkuji všem, kteří během minulých deseti let proměnili zastaralá a krkolomná řešení ve skvost, se kterým se příjemně pracuje nejen našim klientům, ale taky našim programátorům, a který nevnáší do naší každodenní činnosti žádná nepříjemná překvapení.