Have an account? Sign in
Login  Register  Facebook
How to create awesome CSS3 pagination with next/last and multi stylesheets
[Edit] What Does That Mean?
When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This code creates these elements

The Demo (English Names list - View two records in each page ) ($limit = 2;)

Download Source Code

Take a look below in files section, you can download or view any file you need


[Edit] Server Side
To display your mysql records according to the number of the page you have to use mysql start and limit syntax. so you have to calculate the start point according to the limit and the page number
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 2;
$startpoint = ($page * $limit) - $limit;
now we will display 2 recored in each page $limit = 2;

Display the records

use this syntax:
"SELECT * FROM `records` LIMIT {$startpoint}, {$limit}"
So far, we have no pagination.

Pagination

You can get this function from function.php
echo pagination(`records`,$limit,$page);

Syntax

pagination($query, $per_page = 10,$page = 1, $url = '?') 
Parameter Description
query Your pagination query ( mysql table with where conditions ) Example
`records` where `active` = 1
per_page Number of records you will display in each page
page Your current page number ( use $_GET["page"] to get it )
url the url you will get when you click on the page number example: in case of $url = '?' when you click on page 1 you will go to ?page=1, in case of $url = '/news/world/' when you click page 1 you will go to /news/world/page=1
[Edit] Styles and Colors
To Make it Colored you have to use two style sheet 1- The main style - pagination.css
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
2- Your color style - B_red.css in example (take a look belw you will see some styles)
<link href="css/B_red.css" rel="stylesheet" type="text/css" />

STYLE A

YELLOWRED
GREEN

STYLE B

RED
BLACK
BLUE

STYLE C

YELLOW
RED
GREEN
Don’t be Afraid to Ask for Help
It’s only human nature to want to hide the fact that we don’t know much about a certain topic. Nobody likes being a n00b! But how are we going to learn without asking? Feel free to use our problems section to ask more seasoned PHP developers questions.
pagination September 22, 2011