Diskuze pod článkem - 3.díl - tříděná uživatelem
V minulých dílech jsme si ukázali dvě nejčastěji používané formy zobrazování komentářů v diskuzích pod publikovaným článkem. pověděli jsme si o výhodách o nevýhodách obou zobrazení.
Vezměme si ale příklad běžného uživatele, který pod článek umístil svůj komentář a po nějaké době se na tyto stránky vrací. Pravděpodobně ho budou nejvíce zajímat reakce na jeho příspěvek a kromě toho si třeba bude chtít přečíst všechny nové příspěvky ve všech vláknech, které přibyly od jeho návštěvy. Ani jeden z uvedených způsobů nesplňuje tyto požadavky tak aby se dalo říci, že je „user friendly“, tedy přátelský k uživateli.
Diskuze (tabulka) tříděná uživatelem
Při procházení různými diskuzemi, jsem objevil jeden velmi šikovný script. S jeho pomocí můžete u jakékoliv tabulky zobrazené na vašich stránkách dát uživateli možnost třídit si ji dle libovolného sloupce. Je to velice silný nástroj třeba pro zobrazování tabulek sportovních výsledků. Nemusíte tak zohledňovat různé požadavky čtenářů. Publikujete na webu jen jednu tabulku a každý ať si ji seřadí jak bude potřebovat.
Script jsem objevil v jednom starším článku na Choseho blogu ( http://www.chose.cz/weblog/index.php/razeni-dat-v-tabulce-pomoci-javascriptu/ ). Naleznete tam i odkaz na originální stránky autora s podrobným popisem funkce i implementace. Na stránkách WebFX ( http://webfx.eae.net/dhtml/sortabletable/sortabletable.html ) si dole stáhněte ZIP balíček se zdrojovými kódy, scriptem a CSS. Já jsem použil upravený script od Choseho a ještě jej drobátko upravil pro třídění dle formátu datumu. Samostatný upravený script můžete stáhnout zde ( http://www.fotohans.net/storage/sortabletable.zip ).
Script dokáže třídit sloupce tabulky různými způsoby dle jejich obsahu. mohu nastavit třídění jako řetězec, řetězec bez rozlišení velikosti písma (CaseInsensitive), číslo, datum. V mém upraveném scriptu je nutné pro třídění jako datum mít v buňce tabulky text ve formátu d.m.Y - H:i:s. Není ale problém si ve staženém scriptu danou funkci upravit dle potřeb.
Pro potřeby třídění diskuze pod článkem jsem měl problém jak správně třídit dle vlákna, když v názvu příspěvku mám na počátku mezery. Třídění dle řetězce zde nepřicházelo v úvahu. Naštěstí je možné provádět třídění nejen kliknutím na záhlaví sloupce ale je možné i vytáhnout tuto funkci na samostatné tlačítko a určit jí, podle kterého sloupce má třídit (číslováno od 0). Potom bylo jednoduché přidat do tabulky další sloupec s číslem řádku (celá tabulka je setříděna dle idstring viz. minulý článek ( http://blog.fotohans.net/diskuze-pod-clankem-dle-vlakna.html )) a tento sloupec skrýt.
Implementace do stránek
// jen část z kódu, pro správnou funkci odesílání hodnot zatržení
// checkboxu by celá tabulka musela být ve formuláři a odesílalo
// by se ještě ID článku
.
.
// tlačítka nad tabulkou pro třídění dle zvoleného sloupce (i skrytého)
<button onclick="st1.sort(1)">Dle Vlákna</button>
<button onclick="st1.sort(3)">Dle Jména</button>
<button onclick="st1.sort(4)">Dle Datumu</button>
// nastavení cesty ke scriptu
<script type="text/javascript" src="design/sortabletable.js"></script>
// v tabulce je nutné mít sekci <thead>
<table class="sort-table" id="tabulka" cellspacing="2">
<thead cellspacing="2"><tr>
<td width="20"> </td>
<td width="20" style="display:none"> </td>
<td>Pořadí</td>
<td width="100">Jméno</td>
<td width="120">Datum</td>
</tr>
</thead>
<tbody>
// ....V cyklu vypisované řádky tabulky
<tr>
<td><input type="checkbox" name="a_komentar[]" id="C{číslo komentáře}" value="{číslo komentáře}" /></td>
<td style="display:none">{číslo řádku}</td>
<td><label for="C{číslo komentáře}">{název příspěvku}</label></td>
<td>{autor}</td>
<td>{datum}</td></tr>
// ....Konec cyklu výpisu řádků tabulky
</tbody>
</table>
// vytvoření objektu a určení jak bude který sloupec tříděn
<script type="text/javascript">
var st1=new SortableTable("tabulka",["None","Number","None","CaseInsensitiveString","Date"]);
st1.sort(0);
</script>
V uvedeném zestručněném kódu bych rád upozornil na několik drobností.
- Nejdříve jsou zobrazena tři tlačítka, kterým je přiřazena funkce třídění na určitém sloupci (sloupec 1 je právě ten skrytý s číslem řádku), způsob třídení viz níže
- poté je uvedena cesta k vlastnímu souboru se scriptem
- hlavička tabulky musí být uzavřena v tagu <thead>
- jednotlivé checkboxy nabývají hodnot dle id komentáře a jsou odesílány jako pole, ze kterého je poté PHP programem zjištěno které komentáře uživatel chce zobrazit
- název příspěvku je dán jako <label>, pro zaškrtnutí checkboxu tedy stačí kliknout na název příspěvku
- pod tabulkou je spuštěna vlastní funkce vytvářející nový objekt SortableTable
- prvním parametrem funkce je název tabulky a druhým je pole určující jakým způsobem budou tříděny jednotlivé sloupce
Tip! - vlastní funkci třídění tabulky si můžete vyzkoušet na diskuzi pod tímto článkem.
Související články:
- Diskuze pod článkem - 2.díl - dle vlákna ( http://blog.fotohans.net/diskuze-pod-clankem-dle-vlakna.html )
- Diskuze pod článkem - 1.díl - dle příspěvků ( http://blog.fotohans.net/diskuze-pod-clankem-dle-prispevku.html )
- Pruhovaná tabulka ( http://blog.fotohans.net/pruhovana-tabulka.html )