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

Popularity: unranked

Odpowiedz

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





Zend Framework: gwiazdka przy wymaganych polach

W przypadku wymaganych pól w formularzach najczęściej oznacza się je poprzez dodanie gwiazdki. W tym wpisie chciałbym pokazać w jaki [...]

MySQL: GROUP_CONCAT

Ostatnio zostałem poproszony, aby na liście zamówień w sklepie PrestaShop wyświetlić listę produktów, które zostały sprzedane. Oczywiście można by było [...]

Zend Framework: jak zwiększyć wartość o 1 w bazie danych?

Ostatnio wykonując projekt w Zend Framework musiałem zwiększyć wartość kolumny pewnego rekordu o jeden. Oczywiście można by było wykonać najpierw [...]

PHP: Skracanie długich linków

Czasem w komentarzach ktoś może wstawić długi link, który może rozciągnąć naszą stronę. Jednym z rozwiązań jest skrócenie linku. Przykładowo [...]