SeanJA/page.php

## page.php
<?php
//make sure that page is an int, and at least 1...
$data['page'] = (isset($_GET['page'])) ? (int) $_GET['page'] : 1;
//make sure that page is at least 1
if ($data['page'] <= 0) {
	$data['page'] = 1;
}

//remove one from page for the query
$offset = $data['page'] - 1;

//no need to escape things here, $page is already an int
$query = 'SELECT image, content FROM records LIMIT 10 OFFSET ' . $offset * 10;

//assume results are returned as an array
$data['results'] = db_query($query);

//show the page
display_page('paged_results.tpl.php', $data);

## paged_results.tpl.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Paging Demo - Page <?php echo $page ?></title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<div id="container">
			<div id="results">
				<?php foreach ($results as $res) { ?>
					<div>
						<img src="<?php echo $res['image']; ?>" alt="" />
						<span>
							<?php echo $res['content']; ?>
						</span>
					</div>
				<?php } ?>
			</div>
			<ul class="pager">
				<?php for ($i = 1; $i <= $num_pages; $i++) { ?>
					<li class="<?php echo ($page == $i) ? 'current' : null; ?>">
						<a href="/page.php?page=<?php echo $i ?>">
							<?php echo $i ?>
						</a>
					</li>
				<?php } ?>
			</ul>
		</div>
		<img id="spinner" class="hidden" src="loader.gif" alt="loading..." />
	</body>
</html>

## results.sql
/* force utf8 so you don't have problems later on with character encoding... */
CREATE TABLE `records` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` text COLLATE utf8_bin NOT NULL,
  `image` varchar(200) COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

## script.js
jQuery().ready(function(){
    jQuery('ul.pager a').click(function(){
        //a function seems a bit much for the show/hide spinner functionality
        jQuery('#spinner').show();
        var $a = jQuery(this),
            $ul = jQuery(this).parents('ul:first'),
            href = jQuery(this).attr('href');
        //use the load function, to automagically fill in the content right away
        jQuery('#results').load(href + ' #results', function(){
            //see comment above
            jQuery('#spinner').hide();
            //toggle the current pager page style to the new one
            $ul.find('a.current').removeClass('current');
            $a.addClass('current');
        });
    });
});
	<?php
	//make sure that page is an int, and at least 1...
	$data['page'] = (isset($_GET['page'])) ? (int) $_GET['page'] : 1;
	//make sure that page is at least 1
	if ($data['page'] <= 0) {
	$data['page'] = 1;
	}

	//remove one from page for the query
	$offset = $data['page'] - 1;

	//no need to escape things here, $page is already an int
	$query = 'SELECT image, content FROM records LIMIT 10 OFFSET ' . $offset * 10;

	//assume results are returned as an array
	$data['results'] = db_query($query);

	//show the page
	display_page('paged_results.tpl.php', $data);
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Paging Demo - Page <?php echo $page ?></title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<div id="container">
	<div id="results">
	<?php foreach ($results as $res) { ?>
	<div>
	<img src="<?php echo $res['image']; ?>" alt="" />
	<span>
	<?php echo $res['content']; ?>
	</span>
	</div>
	<?php } ?>
	</div>
	<ul class="pager">
	<?php for ($i = 1; $i <= $num_pages; $i++) { ?>
	<li class="<?php echo ($page == $i) ? 'current' : null; ?>">
	<a href="/page.php?page=<?php echo $i ?>">
	<?php echo $i ?>
	</a>
	</li>
	<?php } ?>
	</ul>
	</div>
	<img id="spinner" class="hidden" src="loader.gif" alt="loading..." />
	</body>
	</html>
	/* force utf8 so you don't have problems later on with character encoding... */
	CREATE TABLE `records` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`content` text COLLATE utf8_bin NOT NULL,
	`image` varchar(200) COLLATE utf8_bin NOT NULL,
	PRIMARY KEY (`id`)
	) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
	jQuery().ready(function(){
	jQuery('ul.pager a').click(function(){
	//a function seems a bit much for the show/hide spinner functionality
	jQuery('#spinner').show();
	var $a = jQuery(this),
	$ul = jQuery(this).parents('ul:first'),
	href = jQuery(this).attr('href');
	//use the load function, to automagically fill in the content right away
	jQuery('#results').load(href + ' #results', function(){
	//see comment above
	jQuery('#spinner').hide();
	//toggle the current pager page style to the new one
	$ul.find('a.current').removeClass('current');
	$a.addClass('current');
	});
	});
	});