Egoblog.cz - Petr Kobelka

PHP - Jednoduché stránkování obsahu

Potřeboval jsem na jeden svůj web přidat stránkování a něchtělo se mi nějak složitě implementovat různé knihovny. Níže Vám popíši své řešení, třeba se Vám bude hodit.


PHP | Komentáře (0) | Shlédnuto 1969 × | Vloženo: 23. března 2014

Princip fungování jednoduchého stránkování

Hlavním požadavkem bylo, aby webová stránka pracovala rychle při přepínání mezi jednotlivými stránkami obsahu. Tedy první věcí bylo načíst celý obsah. Následně při jeho generování v šabloně dostane každý blok obsahu class určitého vzoru.

Stránkování funguje pomocí přesných vzorů class kdy všechny bloky obsahu schovám a zobrazím jen ty, které mají jen tu správnou class podle vzoru.

Struktura class je "pager<POSITIV_NUMBER>"

Např. pager1, pager2, pager3, ...

Následně podle konkrétní zvolené stránce, jejíž číslo znám už jen zobrazím pouze ty bloky, které mají tu správnou class. Jednoduché že?

Stránkování má v sobě variantu, když je počet stránek vyšší než určité maximum, bude ve stránkování zobrazovat pouze začátek, konec a výběr několika stránek vlevo a vpravo od aktuální vybrané stránky.

Vstupní data stránkování

Skriptu je třeba správně nastavit následující hodnoty:

  • Počet stránek
  • Počet jednotlivých obsahových bloků:
  • Aktuální stránku:

Vygenerování stránkování na webu

Základem je html se správně definovanými bloky. Pro tří stránkovou verzi může být např.

<div class="pager1">obsah 1</div>
<div class="pager1">obsah 2</div>
<div class="pager1">obsah 3</div>
<div class="pager1">obsah 4</div>

<div class="pager2">obsah 5</div>
<div class="pager2">obsah 6</div>
<div class="pager2">obsah 7</div>
<div class="pager2">obsah 8</div>

<div class="pager3">obsah 9</div>
<div class="pager3">obsah 10</div>
<div class="pager3">obsah 11</div>

Vše ovládá velmi jednoduchý Javascript:


  function run(pageNumber)
  {
    drawPages(pageNumber);

    $('.eshopProduct').hide();
    $('.productItem'+parseInt(pageNumber-1)).show();
    $('.pagerPages a').removeClass('activeSlide');
    $('.pagerPages a.noPage'+(pageNumber)+'').addClass('activeSlide');

    return false;
  }

  function drawPages(actualPage)
  {
    var countAll = {$allProducts};
    var itemsOnPage = {$eshopProductCount};

    if (countAll > 0 && itemsOnPage > 0)
    {
      var pages = Math.ceil(countAll / itemsOnPage);
      if (pages > 1)
      {
        $('.pagerPages').remove();
        $('<div class="pagerPages"></div>').appendTo('.eshopProducts');

        if (pages < 20)
        {
          for (i=0;i<pages;i++)
          {
            $('<a rel="nofollow" href="#" class="noPage'+(i+1)+'" onclick="return test('+(i+1)+');">'+(i+1)+'</a>').appendTo('.pagerPages');
          }
        }
        else
        {
          var startIn = actualPage - 4;
          var endIn   = actualPage + 3;

          for (i=0;i<3;i++)
          {
            $('<a rel="nofollow" href="#" class="noPage'+(i+1)+'" onclick="return test('+(i+1)+');">'+(i+1)+'</a>').appendTo('.pagerPages');
          }

          if (actualPage < 3)
          {
            $('<span class="pagerBlank"> &hellip; </span>').appendTo('.pagerPages');
          }

          if (actualPage >= 3 && actualPage <= (pages - 3))
          {
            if (actualPage <= 6)
            {
              startIn = 3;
              endIn = 10;
            }
            else if (endIn >= pages - 3)
            {
              startIn = pages - 10;
              endIn = pages - 3;
            }

            $('<span class="pagerBlank"> &hellip; </span>').appendTo('.pagerPages');

            for (i=startIn;i<endIn;i++)
            {
              $('<a rel="nofollow" class="noPage'+(i+1)+'" href="#" onclick="return test('+(i+1)+');">'+(i+1)+'</a>').appendTo('.pagerPages');
            }
          }

          if (actualPage >= 3 && actualPage < pages - 3)
          {
            $('<span class="pagerBlank"> &hellip; </span>').appendTo('.pagerPages');
          }

          for (i=pages-3;i<pages;i++)
          {
            $('<a rel="nofollow" class="noPage'+(i+1)+'" href="#" onclick="return test('+(i+1)+');">'+(i+1)+'</a>').appendTo('.pagerPages');
          }
        }
      }
    }
  }

  jQuery(function()
  {
    $(document).ready(function()
    {
      /* simple inpage pagination */
      drawPages(1);
      run(1);

      $("img.lenoch").lazyload(
      {
        effect : "fadeIn"
      });
    });
  });

  • funkce drawPages() vykresluje stránkování
  • funkce run() zobrazí položky požadované stránky

Negativa jednoduchého stránkování

Stránkování je velmi jednoduché, které ale fzunguje na principu schvovávání obsahu a tedy není příliš vhodné na weby, kde je dúležitá SEO optimalizace.

 

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!

Oups, žádné komentáře? Buďtě první !!!

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.