Autor Zpráva
leorond
Profil
Ahoj, chtěl bych se dozvědět více o Ajax a to konkrétně o stránkování.

Nikde jsem nenašel článek jak toto stránkování vytvořit, tedy pokud nepočítám nette.

Jediné co jsem našel v jedné diskuzi je již hotový script který prý dobře funguje ale jak dál, když nevím jak má vypadat HTML kód?

Script pro stránkování

        jQuery('.results-filter a').live('click', function(e){
            e.preventDefault();
            var link = jQuery(this).attr('href');
            jQuery('.ajax').fadeOut(500, function(){
              Cufon.refresh(); //obnovit cufon font 
              jQuery('.loader').show();
            }).load(link + ' .results', function(){ 
              jQuery('.ajax').fadeIn(500, function(){
              jQuery('.loader').fadeOut(800);
            }); });
          });

Dokázal by jste mi někdo poradit a trochu popsat script?

Moc děkuji za reakce
Michales
Profil
leorond:
Nikde jsem nenašel článek jak toto stránkování vytvořit
Tak špatně hledáš: lmgtfy.com/?q=ajax+pagination&l=1
leorond
Profil
Michales: Děkuji

No ještě najít něco co by mi fungovalo, jako například nekonečné stránkování, všude je HTML kód a JS ale to co by mi fungovalo tak je pro mne nepoužitelné a z informací získaných na těch webech vím jen že to mám zkopírovat.
leorond
Profil
Ano tak už 2 dny a stále žádné fungující řešení jsem nenašel


Ztráta času
martin1312
Profil
leorond:
Michales ti poradil, hneď prvý odkaz www.sanwebe.com/2013/03/ajax-pagination-with-jquery-php popisuje kód JS aj PHP, dole je aj demo ukážka. Čo sa ti nepáči napríklad na tomto?
Ak chceš pochopiť kód, googli si jednotlivé funkcie a pozri sa, čo robia.
leorond
Profil
martin1312: Je to OOP kterému já nerozumím
Keeehi
Profil
leorond:
OOP to opravdu není. Objekt se tam sice vyskytuje ale je to jen pro práci s databází. Nic extrémně složitého. Navíc všechny metody mají své procedurální ekvivalenty, které se jmenují úplně stejně. Takže pokud bys to tak nutně potřeboval, šlo by se toho objektu velmi lehce zbavit.
leorond
Profil
Pánové můj článek začíná Ahoj, chtěl bych se dozvědět více o Ajax a to konkrétně o stránkování.

Nezačíná Chci nutně na svůj web stránkování hoďte mi někdo hotové řešení

Učil jsem se 14 let němčinu ale anglicky umím maximálně rukama nohama.

No příště půjdu radši na stránky google než sem abych se dozvěděl že mám jít na google odborníci na slovo vzatí
Michales
Profil
leorond:
Pánové můj článek začíná Ahoj, chtěl bych se dozvědět více o Ajax a to konkrétně o stránkování.

Ano to máš pravdu, zároveň si také psal že:

Nikde jsem nenašel článek jak toto stránkování vytvořit, tedy pokud nepočítám nette.

takže jsem za tebe na google vyhledal články s touto tématikou, kde se to podrobně rozebírá.

Učil jsem se 14 let němčinu ale anglicky umím maximálně rukama nohama.
Tohle už přeci není problém zdejší diskuze. Pro další vývoj v programování a pochopení scriptů bude angličtina velmi potřebná.
Takže závěrem shrnutí co si pro to ty sám udělal?
Vůbec nic.
Dostal si odpověď na svou otázku a ještě se zlobíš. možná se najde někdo kdo ti tu bude celou procedůru ajaxu vysvětlovat ale celkem proč, když článků je o tom stovky.
leorond
Profil
To je pravda ale v tom případě nevím proč existuje fórum které má sekci JavaScript když ho od tud pošlou hledat do google to mi drásá nervy!
Kdybych chtěl odpověď najít na googlu tak tady ani nic nepíšu ale bohužel se prostě musím smířit s tím že psát sem byla ztráta času a né snažit se zprovoznit demo stránkování které někdo vytvořil nebo od někoho zkopíroval, jelikož místo toho aby mi někdo vysvětlil základ ( což by někomu kdo to umí zabralo 5 minut psaní ) tak mne radši odkážou na google a to se pánové vyplatí taková rada je k nezaplacení.


Michales, [#9] a ještě k tomuto, nepleť si jak ho vytvořit s jak ho zkopírovat nebo stáhnout, nechci návod jak ho vložit do stránek.
Keeehi
Profil
leorond:
místo toho aby mi někdo vysvětlil základ ( což by někomu kdo to umí zabralo 5 minut psaní )
A proč by kdokoli měl trávit svých 5 minut (spíše půl hodiny), když základy už byly vysvětleny mockrát a na spoustě místech. Ano, spoustu toho je v angličtině ale bez angličtiny na úrovni alespoň čtení dokumentace to dneska už bohužel moc nejde. Přesto se dají najít i články v češtině.
AJAX
citron.blueboard.cz/clanek/ajax-navod-pro-zacatecniky
citron.blueboard.cz/clanek/univerzalni-funkce-pro-ajax
citron.blueboard.cz/clanek/jquery-pro-zacatecniky-ajax
jquery-navod.cz/kategorie-ajax/9-ajax

(suvisející) Změna URL bez obnovení stránky, Stránkování

zprovoznit demo stránkování které někdo vytvořil nebo od někoho zkopíroval,
Ale to je právě přesně to, co by jsi měl udělat. Zprovozníš demo a koukáš, jak funguje. Šťoucháš do něj z různých stran a pozoruješ, co to s ním dělá. Z toho dostaneš mnohem lepší představu o technologii než z jejího popisu nebo ukázky samotného kódu. Ano hodí se i přečíst si nějaký článek nebo manuál, ale to už budeš vědět o čem tam zrovna mluví a bude to dávat větší smysl.
Fisir
Profil
Reaguji na leoronda:
Opakování je sice matka moudrosti, ale zjevně nikdo nevidí důvod, proč popisovat již mnohokrát popsané znovu extra pro tebe. V tvém případě by bylo dobré zopakovat něco jiného — jestli chceš programovat, musíš umět anglicky (alespoň pasivně). Dneska ale mám dobrou náladu, tak jsem ti ten odkaz od martina1312 v [#5] přeložil.

# AJAXové stránkování s jQuery a PHP


Stránkování je klíčovou součástí každého webu, zejména pokud má stovky záznamů v databázi, které je třeba najednou vypsat. V dnešní době je za použití AJAXu možné vytvořit stránkování, které nevyžaduje žádné obnovení stránky a uživatelé mohou zůstat na stejné stránce a rychle procházet velké počty záznamů. V tomto článku využijeme jQuery a PHP pro vytvoření AJAXového stránkování pro procházení vašich záznamů v databázi bez nutnosti obnovit stránku.


Ajax Pagination = AJAXové stránkování; Results = výsledky

HTML

Nejprve vytvoříme HTML soubor, který bude pomocí AJAXu volat PHP skript a načte odpověď do divu na stránce. Během načítání bude pro informaci zobrazen načítací obrázek.

<div class="nacitaci-div"><img src="nacitani.gif" ></div>
<div id="vysledky"><!-- obsah se nahraje sem --></div>

jQuery

Je sice možné vytvářet AJAXové požadavky pouze za použití čistého JavaScriptu, ale vzhledem k tomu, že většina webů obsahuje jQuery, využijeme její vestavěnou metodu load() pro AJAXová volání na PHP skript. (*)

$(document).ready(function() {
    $("#vysledky" ).load( "nacist.php"); // načte první záznamy
    
    // kód níže se vykoná při kliknutí na odkazy ve stránkování
    $("#vysledky").on( "click", ".strankovani a", function (e){
        e.preventDefault();
        $(".nacitaci-div").show(); // zobrazit indikátor načítání
        var cisloStranky = $(this).attr("data-stranka"); // získá číslo požadované stránky
        $("#vysledky").load("nacist.php",{"stranka":cisloStranky}, function(){ // načíst obsah z PHP skriptu
            $(".nacitaci-div").hide(); // po načtení obsahu skrýt indikátor načítání
        });
        
    });
});

Nejprve načteme první stránku záznamů zavoláním metody load() a následně připravíme událost při kliknutí na odkazy ve stránkování, které vyšlou AJAXový požadavek na PHP skript spolu s číslem požadované stránky. Výsledek pak bude vložen do elementu div#vysledky.

Načítání položek z databáze a vytvoření odkazů ve stránkování pomocí PHP

Nyní máme připravený jQuery kód pro vytváření AJAXových požadavků a je třeba vytvořit nový PHP skript, které na ně bude odpovídat. Tento PHP skript bude fungovat v pozadí a návštěvník nebude odkazován přímo na něj.

$db_uzivatel    = 'uzivatel';    // uživatel databáze
$db_heslo        = 'heslo';        // heslo uživatele
$db_databaze    = 'databaze';    // jméno databáze
$db_hostitel    = 'localhost';    // hostname nebo IP databázového serveru
$zaznamu_na_stranku = 5; // počet zobrazených položek na stránce

$mysqli = new mysqli($db_hostitel, $db_uzivatel, $db_heslo, $db_databaze);
// ukončit skript v případě chyby připojení
if ($mysqli->connect_error) {
    exit; // (**)
}


// získat číslo stránky z AJAXu
if(isset($_POST["stranka"])){
    $cislo_stranky = filter_var($_POST["stranka"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); // zkontrolovat číslo
    if(!is_numeric($cislo_stranky)){die('Neplatné číslo stránky!');} // ukončit skript v případě neplatného čísla
}else{
    $cislo_stranky = 1; // jestliže číslo stránky není nastavené, použít 1
}

// zjistit celkový počet záznamů v databázi
$vysledky = $mysqli->query("SELECT COUNT(*) FROM zpravy");
$celkem_zaznamu = $vysledky->fetch_row(); // uložit celkový počet do proměnné
// přepočítat počet záznamů na počet stran
$celkem_stran = ceil($celkem_zaznamu[0]/$zaznamu_na_stranku);

// stránkovací pozice
$pozice = (($cislo_stranky-1) * $zaznamu_na_stranku);

// vybrat záznamy pro požadovanou stránku
$vysledky = $mysqli->prepare("SELECT id, jmeno, zprava FROM zpravy ORDER BY id ASC LIMIT $pozice, $zaznamu_na_stranku");
$vysledky->execute(); // vykonat připravený dotaz
$vysledky->bind_result($id, $jmeno, $zprava); // napojit proměnné na výsledek dotazu

// vypsat získané záznamy
echo '<ul class="zpravy">';
while($vysledky->fetch()){ // načíst záznam
    echo '<li>';
    echo  $id. '. <strong>' .$jmeno.'</strong> &mdash; '.$zprava;
    echo '</li>';
}
echo '</ul>';

echo '<div style="text-align: center;">';
// zavoláním stránkovací funkce vygenerujeme odkazy
echo vytvorit_strankovani($zaznamu_na_stranku, $cislo_stranky, $celkem_zaznamu[0], $celkem_stran);
echo '</div>';

Po připojení k MySQL databázi musíme získat celkový počet záznamů v tabulce a převést jej na počet stránek. Následně můžeme z databáze vypsat požadované záznamy využitím MySQL klauzule LIMIT. Jak je vidět na konci skriptu výše, voláme funkci vytvorit_strankovani() a předáváme nezbytné parametry pro vygenerování odkazů stránkování.


PHP stránkovací funkce

Níže je kód PHP funkce generující stránkovací odkazy podle předaných parametrů při jejím zavolání v našem PHP skriptu.

function vytvorit_strankovani($zaznamu_na_stranku, $aktualni_stranka, $celkem_zaznamu, $celkem_stranek)
{
    $strankovani = '';
    if($celkem_stranek > 0 && $celkem_stranek != 1 && $aktualni_stranka <= $celkem_stranek){ // zkontrolovat počty stránek
        $strankovani .= '<ul class="strankovani">';
        
        $odkazy_vpravo  = $aktualni_stranka + 3; 
        $predchozi      = $aktualni_stranka - 3; // odkaz pro předchozí
        $dalsi          = $aktualni_stranka + 1; // odkaz pro následující
        $prvni_stranka  = true; // indikátor, zda je aktuální stránka první
        
        if($aktualni_stranka > 1){
            $predchozi_odkaz = ($predchozi==0)?1:$predchozi;
            $strankovani .= '<li class="prvni"><a href="#" data-stranka="1" title="První">&laquo;</a></li>'; // první stránka
            $strankovani .= '<li><a href="#" data-stranka="'.$predchozi_odkaz.'" title="Předchozí">&lt;</a></li>'; // předchozí stránka
                for($i = ($aktualni_stranka-2); $i < $aktualni_stranka; $i++){ // vytvořit odkazy v levé polovině
                    if($i > 0){
                        $strankovani .= '<li><a href="#" data-stranka="'.$i.'" title="Strana #'.$i.'">'.$i.'</a></li>';
                    }
                }   
            $prvni_stranka = false; // aktualní stránka není první
        }
        
        if($prvni_stranka){ // jestliže aktuální stránka je první
            $strankovani .= '<li class="prvni aktivni">'.$aktualni_stranka.'</li>';
        }elseif($aktualni_stranka == $celkem_stranek){ // jestliže aktuální stránka je poslední
            $strankovani .= '<li class="posledni aktivni">'.$aktualni_stranka.'</li>';
        }else{ // ani první, ani poslední
            $strankovani .= '<li class="aktivni">'.$aktualni_stranka.'</li>';
        }
                
        for($i = $aktualni_stranka+1; $i < $odkazy_vpravo ; $i++){ // vytvořit odkazy v pravé polovině
            if($i<=$celkem_stranek){
                $strankovani .= '<li><a href="#" data-stranka="'.$i.'" title="Strana #'.$i.'">'.$i.'</a></li>';
            }
        }
        if($aktualni_stranka < $celkem_stranek){ 
                $dalsi_odkaz = ($i > $celkem_stranek)? $celkem_stranek : $i;
                $strankovani .= '<li><a href="#" data-stranka="'.$dalsi_odkaz.'" title="Následující">&gt;</a></li>'; // následující stránka
                $strankovani .= '<li class="posledni"><a href="#" data-stranka="'.$celkem_stranek.'" title="Poslední">&raquo;</a></li>'; // poslední stránka
        }
        
        $strankovani .= '</ul>'; 
    }
    return $strankovani; // vrátit kód stránkování
}

Závěr

Autor též vytvořil CSS, které stránkování nastyluje pro lepší vzhled (***), stáhnout si jej můžete v ukázce, případně se podívejte na demo. Snad vám to pomůže vytvořit stránkování pro vaše stránky. Jestliže chcete záznamy načítat jako na Facebooku nebo Twitteru, přečtěte si článek Loading More Results (anglicky).

přeloženo z anglického originálu Ajax Pagination with jQuery & PHP
přeložil jsem první článek, na který bylo v tomto vlákně odkázáno, tím neříkám, že je výjimečné kvality nebo že bych postupoval stejně
překládal jsem to rychle bez další kontroly, za kvalitu neručím
(*) s tímto tvrzením překladatel zásadně nesouhlasí
(**) původní skript obsahuje vypsání chybové hlášky, upraveno z důvodu bezpečnosti
(***) CSS styl není součástí překladu a bez přeložení tříd a identifikátorů v něm uvedených nebude s přeloženými kódy fungovat
leorond
Profil
Fisir: Děkuji ti mockrát :) nemusel jsi celý článek překládat, stačilo by vlastními slovy popsat ten JS abych to pochopil :)
Jinak pokud se jedná o angličtinu tak se jí snažím doučit ale nejsem už nejmladší a moc mi to do hlavy už neleze tak je pro mne jednoduší si nechat ten script česky stručně popsat a zbytek už se učím z různých zdrojů včetně pokus omyl.


Má tu ovšem jeden problém a to že mi nefunguje stránkování, když kliknu na odkaz tak dostanu do lišty # ale stránka nepřeskočí. Nevíš kde by mohla být chyba?
leorond
Profil
Tak už jsem chybu našel vše funguje správně ještě jednou děkuji Fisir :)


Předělal jsem to na procedurální styl a snad je to správně

<?php
include('../setings/connect.php');
include('../setings/strankovani_ajax.php');

$zaznamu_na_stranku = 3; // počet zobrazených položek na stránce

// získat číslo stránky z AJAXu
if(isset($_POST["stranka"])){
    $cislo_stranky = filter_var($_POST["stranka"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); // zkontrolovat číslo
    if(!is_numeric($cislo_stranky)){die('Neplatné číslo stránky!');} // ukončit skript v případě neplatného čísla
}else{
    $cislo_stranky = 1; // jestliže číslo stránky není nastavené, použít 1
}
 
// zjistit celkový počet záznamů v databázi
$vysledky = mysqli_query($con, "SELECT COUNT(*) FROM news_koment");
$celkem_zaznamu = mysqli_fetch_row($vysledky); // uložit celkový počet do proměnné
// přepočítat počet záznamů na počet stran
$celkem_stran = ceil($celkem_zaznamu[0]/$zaznamu_na_stranku);
 
// stránkovací pozice
$pozice = (($cislo_stranky-1) * $zaznamu_na_stranku);
 
// vybrat záznamy pro požadovanou stránku
$vysledky = mysqli_prepare($con, "SELECT id_news_koment, komentar, user_kom FROM news_koment ORDER BY id_news_koment ASC LIMIT $pozice, $zaznamu_na_stranku");
mysqli_stmt_execute($vysledky); // vykonat připravený dotaz
mysqli_stmt_bind_result($vysledky, $id_news_koment, $komentar, $user_kom); // napojit proměnné na výsledek dotazu
 
// vypsat získané záznamy
echo '<ul class="zpravy">';
while(mysqli_stmt_fetch($vysledky)){ // načíst záznam
    echo '<li>';
    echo  $id_news_koment. '. <strong>' .$komentar.'</strong> &mdash; '.$user_kom;
    echo '</li>';
}
echo '</ul>';
 
echo '<div style="text-align: center;">';
// zavoláním stránkovací funkce vygenerujeme odkazy
echo vytvorit_strankovani($zaznamu_na_stranku, $cislo_stranky, $celkem_zaznamu[0], $celkem_stran);
echo '</div>';
?>

K mému překvapení asi i správně a alespoň tomu rozumím, teď si jdu hrát s tím JS :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: