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

04. srp 2015 21:34 #122914

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

Začátečník

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

Moderátor

Pomocí Javascriptu - např. DataTables

04. srp 2015 22:45 #122916

Odpověď od Tomas

Začátečník

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

Moderátor

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

Začátečník

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

Moderátor

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

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

Odpověď od Tomas

Začátečník

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

07. srp 2015 10:30 #122962

Odpověď od Pavel

Zkušený uživatel

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

07. srp 2015 13:01 #122966

Odpověď od Cony

Moderátor

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

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

Odpověď od Tomas

Začátečník

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

09. srp 2015 08:44 #122992

Odpověď od Tomas

Začátečník

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

10. srp 2015 00:20 #122999

Odpověď od Cony

Moderátor

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

14. srp 2015 09:53 #123036

Odpověď od Tomas

Začátečník

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

14. srp 2015 10:08 #123037

Odpověď od Tomas

Začátečník

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

Přihlásit se

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

Nejnovější příspěvky