Skippa paginering – ladda innehållet dynamiskt!

Paginering kan vara en riktig “pain-in-the-ass” ibland, speciellt då man inte vill ladda om sidan. Klart att man kan fixa det med hjälp av JavaScript och AJAX - men om man vill skippa pagineringen helt, vad gör man då för att ladda in mer innehåll? Jo, det ska jag berätta! Idag tänker jag gå igenom hur du skapar en enkel funktion som laddar in innehållet dynamiskt och presenterar det på sidan.

Det krävs dock att man förstår lite PHP, JavaScript och kan använda sig av det berömda jQuery-biblioteket.

Först skapar vi en enkel HTML-fil, inga konstigheter här:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="se">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Skippa paginering</title>
		<script src="http://code.jquery.com/jquery.min.js"></script>
		<script src="load_content.js"></script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

Ni kanske såg att jag länkade in 2 JavaScript-filer, den ena är själva jQuery, och den andra är en fil som vi skall skapa alldeles strax.

Nu skapar vi en JavaScript-fil, döper den till ”load_content.js”, och sedan klistrar vi in följande:

/* om användaren är längst ner på sidan, då laddar vi in innehållet */
$(window).scroll(function() {

	if($(window).scrollTop() == $(document).height() - $(window).height()) {

		load_content();
	}
});

function load_content() {

var last_id = null;

/* vi tittar på antalet "barn" till #content elementet */

if($("#content").children().length > 0) {

/* om större än noll, dvs. om det finns redan några element i #content-elementet så vill vi
fånga sista elementents id och ersätta "box_" med ingenting, vi kommer då få bara en siffra i resultatet
och det vill vi! */

last_id = $("#content").children(":last").attr("id").replace(/box_/gi, "");
}
else {

/* annars så är last_id lika med noll, ganska självklart... */

last_id = 0;
}

$.ajax({

url : "load_content.php",
cache : false,
dataType : "json",
data : {

"last_id" : last_id
},
type : "POST",
success: function(json) {

/* skapar en tom sträng */

var html = new String();

$(json).each(function() {

html += "<div id='box_" + this.id  + "'>";
html += "<h1>" + this.header + "</h1>";
html += "</div>";
});

$("#content").append(html);
}
});
}

Nu måste vi bara skapa en enkel PHP-fil som hämtar innehållet från databasen och returnerar det som JSON, så let’s go!

Vi kallar filen “load_content.php” och klistrar in följande:

<?php
// vi kollar om post-data; last_id är satt
if(isset($_POST["last_id"])) {

	//  kopplar upp oss först till databasen
	mysql_connect("hostname", "user", "password");

	// väljder databas
	mysql_select_db("mydb");

	// skapar en SQL-fråga
	$sql = sprintf("SELECT id, header FROM posts WHERE id > %d LIMIT 10", (int)$_POST["last_id"]);

	// hämtar resultatet
	$result = mysql_query($sql);

	// lägger resultatet i en array
	$result_array = array();

	while ($row = mysql_fetch_object($result)) {

		$result_array[] = $row;
	}

	// rensar resultatet
	mysql_free_result($result);

	// returnerar arrayen som ett JSON-objekt
	echo json_encode($result_array);
	exit;
}
?>

Svårare än så var det inte!

Stora tjänster som till exempel Google Reader använder sig av denna typen av “paginering”.

Man kan alltid förfina koden ovan, det vara bara ett snabbt “quick-and-dirty”-sätt att visa hur man kan göra. Det krävs dock att man redan från början har en del innehåll så att man får fram “scrollbars” på sidan, annars kommer JavaScript aldrig komma igång. Oftast brukar man visa ett antal inlägg från början, vanligtvis de senaste 10.

Det är värt att påpeka att det är kanske inte så bra att använda denna metod om man vill SEO-optimera sin site (då Google gillar paginering mer), men det är snyggt.

Om ni har några problem med koden kan ni alltid kontakta mig via e-post: michal@produktion203.se

Lycka till!