Hvordan bygge en Ajax paginering med jQuery og PHP

November 6

Hvis du trenger å vise lange biter av tekst, for eksempel artikler eller historier, på nettstedet ditt, kan du skille det inn i sider, ved hjelp paginering funksjonalitet skrevet i jQuery, Ajax og PHP. Som med de fleste dynamiske websider, eksempelet innebærer her også HTML og CSS. Denne artikkelen forutsetter at du har en grunnleggende forståelse av de involverte språk, og inneholder koblinger til arbeidseksempler.

Bruksanvisning

1 Last ned jQuery-1.5.1.min.js (se Ressurser).

2 Åpne Notisblokk og skriv noen testdata i filen. Det bør være minst 20 linjer. Lagre filen som "mytestdata.txt" på skrivebordet. Lukk Notisblokk.

3 Kopier og lim inn følgende kode inn i en tom fil i Notepad. Lagre filen som "pagination.php" på skrivebordet. Legg merke til at dette er en selv ringer PHP-filen. Den tester for hvorvidt det kalles via Ajax. I så fall avgir det innholdet av "mytestdata.txt" og deretter avsluttes. Ellers viser den HTML-delen. Se Ressurser for link til en fungerende eksempel.

<? Php

$ Filename = "mytestdata.txt";

$ fil = fopen ($ filnavn, "rb");

$ Data = fread ($ fil, filstørrelse ($ filnavn));

fclose ($ file);

if ((strtolower ($ _ SERVER [ 'HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest')

&& ($ _GET [ 'Side']! = "")) {

$ Data = '<pre style = "border: solid; border-width: 1px; word-wrap: break-ord; font-size: 80%; font-family: Times New Roman;">' $ data ".. </ pre> ';

echo $ data;

komme tilbake;

}

$ (Document) .ready (function () {

. $ ( '# Text') belastning ( '? Pagination.php page = 1');

});

</ Script>

</ Body> </ html>

4 Kopier følgende linjer, og lim dem etter "$ filename =" mytestdata.txt ";". Legg merke til at disse linjene teste for om antall linjer per side eller fil ble oppgitt i URL, ellers er det som standard til 10 linjer per side og "mytestdata.txt".

$ LinesPerPage = $ _ GET [ "lpp"];

if ($ linesPerPage == "") $ linesPerPage = 10;

$ Filename = $ _ GET [ 'file'];

if ($ filename == "") $ filename = "mytestdata.txt";

5 Kopier følgende linjer, og lime dem etter "fclose ($ file);". Legg merke til at innholdet av filen leses inn i en matrise kalles "$ linjer", der det totale antall sider beregnes. Det trekker da bare de linjene som tilhører den angitte siden inn i "$ data" variable. Sidetallet er spesifisert i "side" parameter i forespørselsadressen. Se Ressurser for link til en fungerende eksempel.

$ linjer = eksplodere ( "\ n", $ data);

$ NumberOfPages = count ($ linjer) / $ linesPerPage;

if ($ numberOfPages> etasje ($ numberOfPages))

$numberOfPages=floor($numberOfPages)+1;

$ FromPage = $ _ GET [ 'side'];

$ FromLine = ($ fromPage - 1) * $ linesPerPage;

$ ToLine = $ fromPage * $ linesPerPage;

$ Data = "";

for ($ i = $ fromLine; $ i <$ toLine; $ i ++) {

$data=$data.$lines[$i];

}

6 Kopier følgende linjer, og lime etter "<div id = 'text'> </ div>". Legg merke til at dette skaper en liste over sidetall for brukervalg.

<? Php

for ($ i = 1; $ i <= $ numberOfPages; $ i ++) {

echo "<li id = '" $ i.. ""> "$ i" </ li> "..;

}

</ Ul>

7 Kopier følgende linjer, og lime etter "$ (document) .ready (function ()) {". Legg merke til at PHP-koden tildeler PHP variabler til Javascript-variabler.

<? Php

echo "var filename = '" $ filnavn. ".'; \ n";

echo "var linesperpage = '" $ linesPerPage. ".'; \ n";

8 Kopier følgende linjer, og lim under streken "$ ( '# text') belastning ( 'pagination.php page = 1?');".. Legg merke til at Javascript-funksjonen "dispLoad ()" tar sidetallet som parameter og bruker jQuery Ajax "load ()" funksjonen for å laste filen inn i "teksten" div. Filnavnet, sidetall og linjer per side er spesifisert som parametere i forespørselsadressen.

funksjon dispLoad (sidenummer) {

. $ ( '# Text') belastning ( '? Pagination.php file =' + filnavn + '& page =' + sidenummer + '& lpp =' + linesperpage);

}

$ ( '# Paginering li') klikk (function () {dispLoad (this.id);}).;

9 Kopier og lim følgende stil seksjon inni hodet delen av HTML-koden. Legg merke til at disse endre oppsettet av brukervalget sidetall, slik at de ikke lenger vises som punkter.

<Style>

li {list-style: none; float: left; border: solid 1px #eeeeee; color: # 0000AA; markøren: standard; margin-right: 0px;}

</ Style>

10 Sett på linjen "$ ( '# text') belastning ( 'pagination.php page = 1?');"., Med linjen nedenfor.

dispLoad (1);

11 Kopier og lim inn følgende linjer rett etter "-funksjonen dispLoad (sidenummer) {". Legg merke til at den første linjen grå ut alle sidetall, og de andre høydepunktene bare det valgte sidenummeret. Se Ressurser for link til en fungerende eksempel.

$ ( '# Paginering li') css ({ 'farge': '# aaaaaa'}) css ({ 'grensen': 'solid 1px #eeeeee'})..;

$ ( '#' + Sidenummer) Css ({ 'farge': '# 000000'}) css ({ 'grensen': 'solid 1px #aaaaaa'}).;

12 Lagre pagination.php, og laste det opp til rotkatalogen på webserveren din, sammen med mytestdata.txt og jquery-1.5.1.min.js. Peke nettleseren din til "pagination.php" på webserveren din, og teste at det fungerer.