Stronicowanie i ajax - wykorzystanie Pager i ActionsManager

Niedawno zostałem poproszony o przykład stronicowania w połączeniu z ajaxem. W zasadzie już od dawna się do tego przymierzałem, więc czemu nie . A skoro napisałem już ActionsManager to wykorzystam i go.

Po stronie przeglądarki

Zaczniemy od załadowania odpowiednich skryptów i css:

<link rel="stylesheet" href="css/ActionsManager.css" type="text/css" />
	
<script type="text/javascript" src="scripts/Mixed.js"></script>
<script type="text/javascript" src="scripts/ActionsManager.js"></script>
<script type="text/javascript" src="scripts/plugins/ActionsManager_advAjax.js"></script>
<script type="text/javascript">
ActionsManager.loadPlugins('dynamic, position');
</script>
<script type="text/javascript" src="scripts/advajax.js"></script>

Jest to standardowe dołączenie przede wszystkim plików ActionsManager opisane tu. Nasz pager z danymi wyświetlany będzie w div o id mainDiv:

<div id="mainDiv">
a tu pager z danymi
</div>

Stwórzmy teraz funkcję js, którą będziemy wywoływać, by pobrać kolejne strony:

function loadPage(page){
	ActionsManager.setup({
		'guid' : 'pager', 
		'link' : 'ex_with_ajax.php?onlyData=1&page='+page,
		'titleRunning': 'Pobieranie strony...',
		'center' : true,
		'type' : 'html'
	});
}

Banalna, nieprawdaż? Całość stronicowania obsługiwana będzie przez jeden plik ex_with_ajax.php. Jeśli do tego pliku przekażemy w URL parametr onlyData, wówczas plik ten będzie nam zwracał tylko stronicowane dane z pagerem bez dodatkowych kodów html i js.

Teraz kawałek kody, który po pobraniu danych zaktualizuje nam diva z pagerem i schowa okienka ActionsManager:

AjaxAction.prototype.oldAfterRun = AjaxAction.prototype.afterRun;
AjaxAction.prototype.afterRun = function(ajaxObj,params, resultOk){
	//i zamykamy okno
	ActionsManager.hide(this);
	this.oldAfterRun(ajaxObj, params, resultOk); //wywołanie starej metody by zachować jej funkcje
	//wpisujemy nowe dane
	document.getElementById('mainDiv').innerHTML = ajaxObj.responseText;
}

Jest to również niemalże standardowy kod opisany tu
I to w zasadzie wszystko jeśli chodzi o js.

Po stronie serwera (php)

Ponieważ klasa Pager dostarcza jedynie prosty wygląd pagera i jego funkcjonalności, stworzymy drugą klasę, która trochę to wzbogaci. Klasa nadpisze dwie metody prywatne z klasy głównej: toString() oraz createHTMLLink(). Ponieważ toString() będzie wyglądać niemalże identycznie jak pierwowzór, nie będę podawał jej kodu. Funkcja ta jedynie wzbogaca wywołanie metody createHTMLLink() o podanie strony.

<?php
class PagerE extends Pager {
	
protected function createHTMLLink($title, $link, $text,$page) {
	return '<a title="'.$title.'" href="'.$link.'" onclick="loadPage('.$page.');return false;">'.$text.'</a>';
}
}?>

Jak widać metoda createHTMLLink() również jest bardzo podobna do pierwowzoru. Jedyna różnica to dopisanie zdarzenia onclick do linka, które będzie wywoływało opisaną wcześniej metodę loadPage(). Dzięki takiemu stworzeniu linka nasz Pager będzie uniwersalny i nawet osoby z wyłączoną obsługą js będą mogły bez problemu poruszać się po naszym stronicowaniu.

I to tyle. Całość obsługi pagera po stronie php wygląda już standardowo.

Podsumowanie

Jak pisałem wcześniej, całość obsługiwana jest przez jeden plik ex_with_ajax.php. Skrypt ten, jeśli nie podamy w URL parametru onlyData, generuje nam całą stronę. W przypadku gdy wywołujemy go z ActionsManager i zapodajemy już parametr onlyData, skrypt generuje nam tylko dane stronicowania.

Cały przykład dostępny jest począwszy od paczki Pager_v2.5.zip. Zapraszam do ściągania.

ps: Oczywiście to nie musi chodzić na ActionsManager. Może to być dowolny kod ajaxowy. Musicie go tylko napisać

Komentarze

 

Dodaj komentarz

 

Dostępne bbcode: b, u, i, url, code, php, css, html, sql, js

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer