Přihlásit se

Jak vytvořit tabulku s možností třídění

04. srp 2015 21:34 #122914
Hezký večer všem.

Potřeboval bych v Joomla vytvořit a zveřejnit tabulku s několika sloupci, podle kterých by uživatel mohl třídit obsah (řádky), jako je to možné např. v excelu. Data v tabulce by byla vložená napevno, tedy bez potřeby přístupu k DB.

Pro představu, např. tabulku modelů aut, kde ve sloupcích bude max.rychlost, spotřeba, zrychlení, cena a uživatel si bude moci jednotlivé modely řadit podle svých preferencí.

Nějaký nápad jak na to?

04. srp 2015 21:40 #122915
Odpověď od Cony
Pomocí Javascriptu - např. DataTables

04. srp 2015 22:45 #122916
Odpověď od Tomas
Děkuji za odpověď, JavaScript bohužel neovladam, ale pokud by nebylo jiného řešení, asi bych se s tím nějak popral, ale obávám se, že pro jednoduchou tabulku by vynalozeny čas nebyl adekvátní.

Nenapadá vás nějaké rozšíření pro joomlu, které by tuto funkci nabízelo? Strávil jsem dost casu hledáním , ale nenašel jsem nic, co by vyhovovalo.

05. srp 2015 03:25 #122921
Odpověď od Cony
Pomocí DataTables bude vynaložený čas jen několik minut.
Tabulku si připravíte jak potřebujete přímo v nějakém článku. Jediné co bude potřeba, je ořiřazení nějaké třídy (např. datatables)

Pak už to bude o drobné úpravě šablony, přidání CSS a JS DataTables (lze přímo z jejich CDN) a zavolání jednoduchécho skriptu pro inicializaci.

Jednoduchý popis např. zde .

05. srp 2015 14:22 #122933
Odpověď od Tomas
Děkuji za doporučení, DataTables vypadají na výbornou volbu. Výsledný efekt by měl vypadat takto :

Tabulku mám vytvořenou test

Nainstaloval jsem do joomly rozšíření Sourcerer pro vkládání skriptů do článků a odzkoušel funkčnost

Následně jsem si prošel stránky DataTables, ale návodů a příkladů je tam moc a nějak se v tom ztrácím.

Můžete mi prosím poradit jak dále?

05. srp 2015 15:18 #122935
Odpověď od Cony
Použijte sourcerer k vložení kódu přímo z Vašeho odkazu, tj. upraveno na Vaši tabulku
Code:
jQuery(function() { jQuery('#auta').DataTable(); } );
Také musíte vložit odkazy na základní skript, tj.
Code:
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
JQuery nahrané už máte...
Ještě bych doporučil nahrát i základní styly, tj.
Code:
//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css

Nevím jak přesně Sourcerer funguje, ale docílit by jste toho mohl vložením následujícího Javaskipru
Code:
jQuery(function() { jQuery('head').append('<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">'); jQuery('head').append('<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript">'); jQuery('#auta').DataTable(); } );

Powered by Fórum