Vyřešeno Jak vytvořit tabulku s možností třídění

Tomas
Autor
OFFLINE
Začátečník

Více

04. srp 2015 21:34 #122914 od Tomas

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

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?

Cony
Pryč
Moderátor

Více

04. srp 2015 21:40 #122915 od Cony

Odpověď od Cony v tématu Jak vytvořit tabulku s možností třídění

Pomocí Javascriptu - např. DataTables

Tomas
Autor
OFFLINE
Začátečník

Více

04. srp 2015 22:45 #122916 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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.

Cony
Pryč
Moderátor

Více

05. srp 2015 03:25 #122921 od Cony

Odpověď od Cony v tématu Jak vytvořit tabulku s možností třídění

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 .

Tomas
Autor
OFFLINE
Začátečník

Více

05. srp 2015 14:22 #122933 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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?

Cony
Pryč
Moderátor

Více

05. srp 2015 15:18 #122935 od Cony

Odpověď od Cony v tématu Jak vytvořit tabulku s možností třídění

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();
} );

Tomas
Autor
OFFLINE
Začátečník

Více

06. srp 2015 19:33 - 06. srp 2015 19:34 #122955 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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

Pavel
OFFLINE
Zkušený uživatel

Více

07. srp 2015 10:30 #122962 od Pavel

Odpověď od Pavel v tématu Jak vytvořit tabulku s možností třídění

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

Cony
Pryč
Moderátor

Více

07. srp 2015 13:01 #122966 od Cony

Odpověď od Cony v tématu Jak vytvořit tabulku s možností třídění

Na stránkách Vám vyskakuje jakási JavaSkriptová chyba. Nejdřív jí opravte.

Code:

Uncaught TypeError: jQuery(...).not(...).jqBootstrapValidation is not a function

Tomas
Autor
OFFLINE
Začátečník

Více

09. srp 2015 08:39 - 09. srp 2015 08:40 #122991 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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 :-)

Tomas
Autor
OFFLINE
Začátečník

Více

09. srp 2015 08:44 #122992 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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

Cony
Pryč
Moderátor

Více

10. srp 2015 00:20 #122999 od Cony

Odpověď od Cony v tématu Jak vytvořit tabulku s možností třídění

Chybka už zmizela, zkuste upravit skript, který jsem psal takto:

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.getScript( "//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" )
  .done(function() {
    jQuery('#auta').DataTable();
  });
} );

Poděkovali: Tomas

Tomas
Autor
OFFLINE
Začátečník

Více

14. srp 2015 09:53 #123036 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

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

Code:

<!-- 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

Code:

<script language="javascript" type="text/javascript">

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

} );

</script>

a vše funguje prefektně !!!

Tomas
Autor
OFFLINE
Začátečník

Více

14. srp 2015 10:08 #123037 od Tomas

Odpověď od Tomas v tématu Jak vytvořit tabulku s možností třídění

to Cony: děkuji za pomoc a nakopnutí správným směrem !!!

Vygenerováno za 0.095 sekund