jQuery: jPaginate

Autor: Arkadiusz Tobiasz 18 lutego 2011

W tym wpisie postaram się pokazać jak przy użyciu jQuery i pluginu jPaginate wykonać ciekawe stronicowanie na waszej stronie WWW.

Zanim rozpoczniemy pracę musimy ściągnąć bibliotekę jQuery, o ile z niej jeszcze nie korzystasz. Najnowszą wersję możesz pobrać stąd. Oprócz tego musimy pobrać plugin jPaginate, co możesz zrobić klikając w ten link.

To do dzieła! Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętej biblioteki:

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>
<link href="css/jPaginate.css" rel="stylesheet" type="text/css" />

Następnie musimy stworzyć element, najlepiej diva w miejscu, gdzie którym będziemy wyświetlać paginację, np.

1
<div id="pages"></div>

Wywołanie pluginu jPaginate jest bardzo proste, w sekcji <head>…</head> musimy umieścić kod:

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
    $("#pages").paginate();
});
</script>

Oczywiście plugin można dowolnie konfigurować, jeżeli umieścimy poniższy kod:

1
2
3
4
5
6
7
8
9
10
11
12
[cc lang="html"]
<script type="text/javascript">
$(document).ready(function() {
   $("#pages").paginate({
    count : 5,
    start : 2,
    onChange : function(npage){
       location = 'news.php?page=' + npage;
    }
   });
});
</script>

to liczba stron wynosi pięć, a plugin będzie domyślnie zaznaczał drugą stronę jako aktywną. Ponadto w momencie kliknięcia, na którąkolwiek stronę np. oznaczoną numerem pięć skrypt będzie nas przekierowywał na adres news.php?page=5

Pozostaje opcje możliwe do skonfigurowania:
display – ile stron ma domyślnie pokazywać
border (true/false) – czy numery stron mają być obramowane
border_color – kolor obramowania
text_color – kolor numerów stron
background_color – kolor tła
border_hover_color – kolor obramowania, gdy kursor myszki najedzie na dany numer strony
text_hover_color – kolor numeru strony po najechaniu na niego kursorem myszki
background_hover_color – kolor tła, gdy kursor myszki najedzie na dany numer strony
images (true/false) – czy strzałki pokazujące poprzednie i następne strony mają być obrazkami

Demo możecie znaleźć pod tym adresem

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]