PHP Pagination

Posted: June 30, 2010 in CSS, PHP
Tags: , ,

Overview:

This is a script to make pagination in PHP like digg.com or flickr.com.

This script was written by a guy from Stranger Studios. In this page I’ve edit the script a little bit to make it working and easy to edit. You can grab the original script at Digg-Style Pagination. My tutorial is just a guide how to implemente in your PHP script.

This is what you’ll get after finished this code

The Code:

Grab the code and paste in your text editor.

You have to customize 7 spots in this code (see images below).

1. Code to connect to your DB– place or include your code to connect to database.

2. $tbl_name – your table name.

3. $adjacents – how many adjacent pages should be shown on each side.

4. $targetpage – is the name of file ex. I saved this file as pagination.php, my $targetpage should be “pagination.php”.

5. $limit – how many items to show per page.

6. “SELECT column_name – change to your own column.

7. Replace your own while..loop here – place your code to echo results here.

After all, save and test your script.

############### Code

{

$pagination .= ”

“;

//previous button

if ($page > 1)

$pagination.= “« previous“;

else

$pagination.= “« previous”;

//pages

if ($lastpage < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up

{

for ($counter = 1; $counter <= $lastpage; $counter++)

{

if ($counter == $page)

$pagination.= “$counter”;

else

$pagination.= “$counter“;

}

}

elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some

{

//close to beginning; only hide later pages

if($page < 1 + ($adjacents * 2))

{

for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)

{

if ($counter == $page)

$pagination.= “$counter”;

else

$pagination.= “$counter“;

}

$pagination.= “…”;

$pagination.= “$lpm1“;

$pagination.= “$lastpage“;

}

//in middle; hide some front and some back

elseif($lastpage – ($adjacents * 2) > $page && $page > ($adjacents * 2))

{

$pagination.= “1“;

$pagination.= “2“;

$pagination.= “…”;

for ($counter = $page – $adjacents; $counter <= $page + $adjacents; $counter++)

{

if ($counter == $page)

$pagination.= “$counter”;

else

$pagination.= “$counter“;

}

$pagination.= “…”;

$pagination.= “$lpm1“;

$pagination.= “$lastpage“;

}

//close to end; only hide early pages

else

{

$pagination.= “1“;

$pagination.= “2“;

$pagination.= “…”;

for ($counter = $lastpage – (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)

{

if ($counter == $page)

$pagination.= “$counter”;

else

$pagination.= “$counter“;

}

}

}

//next button

if ($page < $counter – 1)

$pagination.= “next »“;

else

$pagination.= “next »”;

$pagination.= ”

\n”;

}

?>

These are where you have to customize the script

Apply CSS Style to your code

Save this code to style.css and link to your pagination page.

############### Code

div.pagination {

padding: 3px;

margin: 3px;

}

div.pagination a {

padding: 2px 5px 2px 5px;

margin: 2px;

border: 1px solid #AAAADD;

text-decoration: none; /* no underline */

color: #000099;

}

div.pagination a:hover, div.pagination a:active {

border: 1px solid #000099;

color: #000;

}

div.pagination span.current {

padding: 2px 5px 2px 5px;

margin: 2px;

border: 1px solid #000099;

font-weight: bold;

background-color: #000099;

color: #FFF;

}

div.pagination span.disabled {

padding: 2px 5px 2px 5px;

margin: 2px;

border: 1px solid #EEE;

color: #DDD;

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s