DragonI

Pagination 101

Article by Faruk Ateş, [originally on KuraFire.net][original] which is currently down

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. After all, I'd say that pagination is pretty easy to get right. Alas, that doesn't seem the case, so after encouragement from Chris Messina on Flickr I decided to write my Pagination 101, hopefully it'll give you some clues as to what makes good pagination.

Before going into analyzing good and bad pagination, I want to explain just what I consider to be pagination: Pagination is any kind of control system that lets the user browse through pages of search results, archives, or any other kind of continued content. Search results are the o

	// It is important to declare your variables.

	(function() {
	var foo = 'Hello, world!';
	print(foo); //=> Hello, world!
	})();

	// Because if you don't, the become global variables.

	(function() {

	// fn to handle jsonp with timeouts and errors
	// hat tip to Ricardo Tomasi for the timeout logic
	$.getJSONP = function(s) {
	s.dataType = 'jsonp';
	$.ajax(s);

	// figure out what the callback fn is
	var $script = $(document.getElementsByTagName('head')[0].firstChild);
	var url = $script.attr('src') \|\| '';
	var cb = (url.match(/callback=(\w+)/)\|\|[])[1];

	<?php
	/**
	* for Eclipse IDE, save to vendors/
	*
	* for cakephp 1.3.0
	*
	*/
	// stop page loading
	exit;

	/* `XHTML, HTML4, HTML5 Reset
	----------------------------------------------------------------------------------------------------*/

	a,
	abbr,
	acronym,
	address,
	applet,
	article,
	aside,

	//
	// While TinyMCE can strip out <script> tags,
	// it does not remove inline JS event handlers.
	//
	// Example: onmouseover, onclick, etc.
	//
	// This should be included at the bottom of a page,
	// contained inside an <iframe> to sandbox user-created
	// content. The reason it is contained in an <iframe>
	// is to prevent user-created CSS from affecting

	<!DOCTYPE html>

	<!-- Helpful things to keep in your <head/>
	// Brian Blakely, 360i
	// http://twitter.com/brianblakely/
	-->
	<head>

	<!-- According to Heather Champ, former community manager at flickr,
	you should not allow search engines to index your "Contact Us"

	[user]
	name = MY_NAME
	email = MY_EMAIL_ADDRESS
	[git-tmbundle]
	gitnub-path = /Applications/GitNub.app
	gitx-path = /Applications/GitX.app
	show-diff-check = yes
	[github]
	user = GITUB_USER
	token = GITHUB_TOKEN

	// HOWTO: load LABjs itself dynamically!
	// inline this code in your page to load LABjs itself dynamically, if you're so inclined.

	(function (global, oDOC, handler) {
	var head = oDOC.head \|\| oDOC.getElementsByTagName("head");

	function LABjsLoaded() {
	// do cool stuff with $LAB here
	}

	$config = {
	"application" => "DOMAIN.TLD",
	"repository" => "git@GITHOST:USERNAME/REPOSITORYNAME.git",
	"remoteusername" => "REMOTEUSERNAME",
	"cake_folder" => "/PATH/TO/CAKE",
	"cake_version" => "cakephp1.3",
	"plugin_dir" => "plugins",
	"servers" => {
	"prod" => {
	"server" => "APPLICATION.TLD",