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

Tomas
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?

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

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

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
04. srp 2015 22:45 #122916
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.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
05. srp 2015 03:25 #122921
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 .

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
05. srp 2015 14:22 #122933
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?

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
05. srp 2015 15:18 #122935
Použijte sourcerer k vložení kódu přímo z Vašeho odkazu, tj. upraveno na Vaši tabulku
jQuery(function() {
    jQuery('#auta').DataTable();
} );
Také musíte vložit odkazy na základní skript, tj.
//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.
//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
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();
} );

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
06. srp 2015 19:33 - 06. srp 2015 19:34 #122955
vložil jsem javaskript do článku, ale nic se nestalo. Tabulka je stále statická - v HTML vypadá vše v pořádku. Mrknete si mi prosím na to? Pokusný článek

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Pavel
07. srp 2015 10:30 #122962
Je tady další možnost existuje velice dobrá komponeta TABULIZER , která umí vkládat do Joomla stránek ecxelovské tabulky a nastavit u nich filtrování, řazení, hledání,.... Můžete si vytvořit různé vzhledy a mnoho dalších nastavení. Má však jednu nevýhodu - je placená, takže záleží k čemu vaše stránky budou sloužit jestli se to vyplatí, ale na druhou stranu komponenta se dá využít pro neomezené množství stránek

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
07. srp 2015 13:01 #122966
Na stránkách Vám vyskakuje jakási JavaSkriptová chyba. Nejdřív jí opravte.
Uncaught TypeError: jQuery(...).not(...).jqBootstrapValidation is not a function

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
09. srp 2015 08:39 - 09. srp 2015 08:40 #122991
to p. Kopeček: děkuji za odkaz, tabulizer zdá se býti docela šikovnou featurkou, nicméně pro moji jednu tabulku se mi jeví platit si opakovaně membership nepříliš výhodné. Obecně nemám problém s placenými featurkami, platíme si např. membership na všechny produkty of yootheme, ale jednorázovým placeným featurkám se snažím vyhnout :-)

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
09. srp 2015 08:44 #122992
to Cony: nikde mi JS chyba nevyskakuje (nebo nevím, kam se podívat), ale z článku jsem pro jistotu vyřadil všechny ostatní JS a ponechal pouze tento jeden článek. Tabulka stále nic nedělá. Co je špatně?

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
10. srp 2015 00:20 #122999
Chybka už zmizela, zkuste upravit skript, který jsem psal takto:
jQuery(function() {
  jQuery('head').append('<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">');
jQuery.getScript( "//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" )
  .done(function() {
    jQuery('#auta').DataTable();
  });
} );
Poděkovali: Tomas

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
14. srp 2015 09:53 #123036
děkuji za zaslání opraveného skriptu. Skript vložen do článku, ale tabulka funguje jen částečně, třídění funguje, ale chybí některé grafické prvky jako šipky třídění (pravděpodobně ještě třeba natáhnout css). Koukl jsem znovu na datatable dokumentaci a provedl úpravu následovně:

Do HTML odkazy na javascript knihovny
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/DataTables-1.10.8/media/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.8/media/js/jquery.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.8/media/js/jquery.dataTables.js"></script>

Pod tabulku inicializační skript
<script language="javascript" type="text/javascript">

$(document).ready( function () { $('#auta').DataTable();

} );

 

</script>

a vše funguje prefektně !!!

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Tomas
14. srp 2015 10:08 #123037
to Cony: děkuji za pomoc a nakopnutí správným směrem !!!

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.