Automatyczne ładowanie zawartości strony podczas przewijania – Jquery scroll pagination

Opublikowany przez

Poszukałem w google i natrafiłem na ciekawy skrypt – Jquery scrollpagination autorstwa Andersona Ferminiano. Dzięki któremu nie jest wymagane ładowanie całej strony na raz. Umożliwia on automatyczne ładowanie zawartości strony podczas jej przewijania do dołu.

Thank you for reading this post, don't forget to subscribe!

W trakcie integrowania go z moim serwisem natrafiłem na pewien problem. Mianowicie, autor niezbyt jasno wyjaśnił kwestię automatycznego ładowania kolejnych wyników. Tak więc w tym artykule napiszę jak to zrobić aby wszystko ładnie pracowało.

krok 1.

Wgraj pliki na swój serwer.

krok 2.

W plików w którym chcesz wykorzystać tą funkcjonalność wklej w sekcji [code]<head> </head>[/code] kod:

<link href="/katalog/css/scrollpagination.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="/katalog/js/scrollpagination.js"></script>


<script type="text/javascript">
$(function(){
	$('#content').scrollPagination({

		'contentPage': '/katalog/dane.php', // the url you are fetching the results
		'contentData': {xyz:function() {return $('#content').children().size()}}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
		'scrollTarget': $(window), // who gonna scroll? in this example, the full window
		'heightOffset': 20, // it gonna request when scroll is 10 pixels before the page ends
		'beforeLoad': function(){ // before load function, you can display a preloader div
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
			 $('#loading').fadeOut();
			 var i = 0;
			 $(elementsLoaded).fadeInWithDelay();
			 if ($('#content').children().size() > 80){ // if more than 100 results already loaded, then stop pagination (only for testing)
			 	$('#nomoreresults').fadeIn();
				$('#content').stopScrollPagination();
			 }
		}
	});
	
	// code for fade in element by element
	$.fn.fadeInWithDelay = function(){
		var delay = 0;
		return this.each(function(){
			$(this).delay(delay).animate({opacity:1}, 400);
			delay += 100;
		});
	};
		   
});
</script>

Oczywiście pamiętaj tu o podaniu prawidłowych ścieżek do plików ( u mnie tu jest /katalog/). Zauważ, że tu już zostały wprowadzone odpowiednie zmiany, których nie zawiera demo skryptu.
a mianowicie, zmienione zostały trzy wiersze:

  • 'contentPage': '/katalog/dane.php',

    — tu podajemy własny plik który będzie odpowiedzialny za dostarczanie kolejnych danych dla skryptu

  • 'contentData': {xyz:function() {return $('#content').children().size()}},

    — tu w nawiasie klamrowym zadeklarowaliśmy zmienną xyz która będzie zwracać nam liczbę już wczytanych rekordów.

  •  if ($('#content').children().size() > 80){

    — zmieniłem wartość na 80 – bo chce aby tyle wyników maksymalnie wyświetliło mi na stronie podczas schodzenia w dół

Krok 3.

W sekcje

– tam gdzie chcesz wklejasz sobie kod z wynikami wklejam znaczniki oraz przykładowe dane:

 <ul id="content">
    	<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
    	<li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
    	<li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
    	<li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.  </p></li>
        <li><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
        <li><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
    </ul>
    <div class="loading" id="loading">Wait a moment... it's loading!</div>
    <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>

Krok 4.

Teraz przejdźmy do wykonania pliku dane.php

W nim należy pobrać zmienną od której zaczniemy szukać danych w naszej bazie, a następnie zwrócić wymagane wyniki. 

           
$id = $_POST['xyz']; //pobieramy numer ostatniego rekoru

$sql ="select * from tabela order by data_dodania DESC limit $od, 5"; // zapytanie aby pobrać z bazy 5 kolejnych rekordów począwszy od zmiennej $od

--- łączymy sie z baza wysyłamy zapytanie ----
?><li> <?php -- a tu wyświetlamy--- ?></li>

I w tym momęcie powinno wszystko ładnie działać… oczywiście pamiętajmy o odpowiednim wystylizowaniu naszych wyników.
Z pliku scrollpagination.css należy usunąć niepotrzebne selektory, a dodać te które są pożądane.