Egoblog.cz - Petr Kobelka

Nette+Bootstrap a stránkování obsahu

V dřívějším článku jsem Vám ukázal, jak jednoduše stránkovat obsah pomocí javascriptu a php. Vzhledem k tomu, že weby hodně píšu v kombinaci Nette+Bootstrap, upravil jsem proces stránkování právě pro tyto technologie.


PHP | Komentáře (1) | Shlédnuto 2082 × | Vloženo: 3. srpna 2014

Předchozí verze stránkování

V předchozím článku jsem stránkoval obsah pomocí kombinace kaskádových stylů (CSS) a javascriptu. V dnešním postu Vám ukážu o něco jednodušší variantu, která bude stránkování obsahu provádět sama. Hlavní bude pouze javascript, již to nebude závislé na CSS. Kód je psán s kaskádami bootstrapu.

Základní myšlenka stránkování

Hlavním cílem bylo zjednodušít dříve napsané. Diky bootstrapu jsem začal obsah pro stránkování chápat o něco jednodušeji. Hlavní myšlenkou bylo, aby maximum věcí a nastavení bylo co nejjednodušší. V této variantě tedy nastavíte pouze class kontejneru s obsahem a kolik chcete vidět na stránce záznamů. Jméno kontejneru nastavujete proto, aby bylo možné mít více takových stránkovacích modulů na jedné webové stránce.

Stránkování je postaveno na to, že v kontejneru máte několik prvků, se kterými pracujete. Tedy stránkujete pouze nejbližší nalezené prvky.

Vzorové HTML:

polozka 1
polozka 2
polozka 3
polozka 4
polozka 5

Javacriptový kód

  var elmName = 'muj_kontejner';
  var onPage = 5;

  jQuery( document ).ready(function( $ )
  {
    var items = parseInt($('.'+elmName+' > div').length);

    $('
    ').insertAfter('.'+elmName); var htmlPage = $('#'+elmName+'-pager'); var pages = Math.ceil(items / onPage); for (i = 0; i < pages; i++) { htmlPage.append('
  • '+(i+1)+'
  • '); } $('.'+elmName+' > div').each(function(index, event) { $(this).hide(); }); showPage(0) }); function showPage(pageId) { $('.'+elmName+' > div').hide(); $('#'+elmName+'-pager li').removeClass('active'); for (p = pageId * onPage; p < pageId * onPage + onPage; p++) { var elm = $('.'+elmName+' > div').eq(p).show(); } $('#'+elmName+'-pager li').eq(pageId).addClass('active'); return false; }

    V horní části jen definujete název kontejneru a počet záznamů na stránku. První část kódu generuje sama stránkování z počtu všech nejbližších prvků v kontejneru. V tomto příkladě jsou použity DIVy, ale lze stránkovat v podstatě asi vše. Funkce showPage() nastavuje zobrazování všech záznamů, které mají v pořadí index podle dané stránky až po index + počet záznamů na stránku.

    Např. v případě, že mám počet záznamů na stránu 5, pak funkce showPage() zobrazí všechny prvky v kontejneru, které v něm mají index 5,6,7,8,9 (indexy lze pochopt/nastudovat např. zde).

    Využití bootstrapu

    Bootstrap využívám jednak kvůli responsivnímu designu "mobile first" a taky proto, že jde najít hodně dostupných template, které vyřeší hezkou grafiku za mě a já se mohu plně soustředit na tvorbu webu.

    Jednoduché že?

    Podobné články jako "Nette+Bootstrap a stránkování obsahu"

    Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

    Petr Kobelka
    Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

    Komentáře

    E-mail je potřeba pouze pro vygenerování Gravataru!

    1
    Mark | vloženo 5. června 2015
    nemate nejakou byt, kratou zkusenost i s Aptanou, Bluefish, CodeLite, PHPStorm ... nechce se mi verit ze by nejaky netbeans mel byt definitivnim resenim, urcite se brzy objevi lepsi :-)
    Petr Kobelka
    Zdravím,

    neříkám že Netbeans je ultimátní řešení. Je to jen o zvyku. Někomu vyhovuje netbeans, někomu třeba Visual Studio. Zkoušel jsem i Aptanu, ale v krátkosti jsem si rychle zvykl na Netbeans a nemám zatím moc důvodů od něj upouštět.


    Hodně lidí si chválí PHPStorm, pro mě je ale problém, že je placený, Netebeans jsou zdarma.

    Blog píše Petr Kobelka

    Petr Kobelka - egoblog.cz

    Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.