Page 1 of 1
Page system (page 1, 2, 3 and so on)
Posted: Fri Sep 25, 2009 11:30 am
by JKM
Hi there,
I need some help with a page setup that should look like this:
Code: Select all
<<First <Prev | 1,2,3-4-5,6,7... | Next> Last>>
It's 5000 rows in the sql db, and the user is able to choose number of rows per page (1-1000).
- <<First and <Prev should only be clickable if the page isn't page 1 (same for Next> and Last>> if the page isn't the last page).
- If the user is looking at page 1, the result should be like this:
Code: Select all
<<First <Prev | -1-,<a href="index.php?page=2">2</a>,<a href="index.php?page=3">3</a>,<a href="index.php?page=4">4</a>... | <a href="index.php?page=2">Next></a> <a href="index.php?page=$last">Last>></a>
- If the user is looking at page 130, the result should be like this:
Code: Select all
<a href="index.php?page=1"><<First</a> <a href="index.php?page=129"><Prev</a> | ...<a href="index.php?page=127">127</a>,<a href="index.php?page=128">128</a>,<a href="index.php?page=129">129</a>-130-<a href="index.php?page=131">131</a>,<a href="index.php?page=132">132</a>,<a href="index.php?page=133">133</a> | <a href="index.php?page=131">Next></a> <a href="index.php?page=$last">Last>></a>
- If the user is looking at the last page (let's say it's page 200), the result should be like this:
Code: Select all
<a href="index.php?page=1"><<First</a> <a href="index.php?page=199"><Prev</a> | <a href="index.php?page=197">197</a>,<a href="index.php?page=198">198</a>,<a href="index.php?page=199">199</a>-200- | Next> Last>>
Re: Page system (page 1, 2, 3 and so on)
Posted: Sat Sep 26, 2009 11:35 am
by JKM
I made it myself. Just ask for code if wanted.
Re: Page system (page 1, 2, 3 and so on)
Posted: Sat Sep 26, 2009 2:38 pm
by Ollie Saunders
This functionality is called
pagination. It has been implemented hundreds of times, as you'll see, if you Google for it. Although, judging from your original post, you'll probably be happier with whatever you've written yourself. Well done

Re: Page system (page 1, 2, 3 and so on)
Posted: Sat Sep 26, 2009 2:41 pm
by Mirge
JKM wrote:I made it myself. Just ask for code if wanted.
Very considerate. It would be helpful for others who happen to stumble across these forums looking for a solution... maybe you could post your example.
Re: Page system (page 1, 2, 3 and so on)
Posted: Sun Sep 27, 2009 3:12 pm
by JKM
Code: Select all
<?php
$qry_f = mysql_query("SELECT id FROM `myDB`.`myTABLE`"); // SELECT only id or something (uneccesary to select more than one field)
$total_rows = mysql_num_rows($qry_f);
// Make $num safe for the main SQL query
if(!empty($_GET['num']) && is_numeric($_GET['num']) && $_GET['num'] != 0 && $_GET['num'] < $total_rows) {
$num = $_GET['num'];
} else {
$num = 50;
}
// Show total rows, number of rows per page and make it possible to change the number of rows per page
echo '<form action="" id="dform">
<span style="color: #333; font-size: 11px;"><strong>Number of rows:</strong> '.$total_rows.' | Showing <strong>'.$num.'</strong> rows per page.</span>
<select id="select_rows">
<option value="blank" selected="selected">Rows per page</option>
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
</form>
<script type="text/javascript">
var pickd = document.getElementById("select_rows");
pickd.onchange = function() {
var valued = this.options[this.selectedIndex];
if(valued.value != "blank" ){
window.location = "index.php?&num="+verdi.value;
}
}
</script>';
$total_pages = $total_rows/$num; // Calculate number of pages
// Find the actual number of pages
// Checks if the number is an integer or not (with or without decimals)
if(is_int($total_pages)) {
$pages = $total_pages;
} else {
$explode = explode(".", $total_pages);
$pages = $explode[0]+1; //If $total_pages returns f.i. 100.3, we would like to list 101 pages and not 100.
}
// Make $page and $truepage safe to use in the SQL query
if(!empty($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] != '0' && $_GET['page'] <= $pages) {
$page = $_GET['page'];
$truepage = ($_GET['page']*$num)-$num; // if page=1, it will show the second page without this line
} else {
$page = 1;
$truepage = 0;
}
$qry_main = mysql_query("SELECT * FROM `myDB`.`myTABLE` ORDER by id DESC LIMIT ".$truepage.", ".$num.""); // The main query
# Add rows-listing here
?>
<p style="text-align: center; margin-bottom: 1px;"><?php // Page listing start - remember to change index.php to whatever your file is
// This is for showing the three previous and/or next pages
$pageM1 = $page-1;
$pageM2 = $page-2;
$pageM3 = $page-3;
$pageP1 = $page+1;
$pageP2 = $page+2;
$pageP3 = $page+3;
// Just some styling (you could use classes and css instead)
$pagestyle1 = 'background-color: #1f1f1f; padding: 1px 3px; border: 1px dotted #FFB400; color: #FFF; font-size: 11px;';
$pagestyle2 = 'color: #000; font-size: 11px;';
if($page != 1) { // If you're not looking at the first page -> add links to the first and previous page
echo '<a href="index.php?num='.$num.'&page=1" style="color: #000; border-bottom: 1px dotted #990000; font-weight: bold; font-size: 11px;"><< First</a> <a href="index.php?num='.$num.'&page='.$pageM1.'" style="color: #000; border-bottom: 1px dotted #990000; font-weight: bold; font-size: 11px;">< Prev</a> | ';
} else { // else, make it in plain text
echo '<span style="color: #666; font-weight: bold; font-size: 11px;"><< First</span> <span style="color: #666; font-weight: bold; font-size: 11px;">< Prev</span> | ';
}
if($pageM1 == 0) { // If you are looking at the first page, we don't want links to previous pages
echo '<span style="'.$pagestyle2.'">-1-</span> <a href="index.php?num='.$num.'&page=2" style="'.$pagestyle1.'">2</a> <a href="index.php?num='.$num.'&page=3" style="'.$pagestyle1.'">3</a> <a href="index.php?num='.$num.'&page=4" style="'.$pagestyle1.'">4</a> <span style="'.$pagestyle2.'">...</span>';
} elseif($pageM2 == 0) { // If you are looking at the second page, we only need one previous page
echo '<a href="index.php?num='.$num.'&page=1" style="'.$pagestyle1.'">1</a> <span style="'.$pagestyle2.'">-2-</span> <a href="index.php?num='.$num.'&page=3" style="'.$pagestyle1.'">3</a> <a href="index.php?num='.$num.'&page=4" style="'.$pagestyle1.'">4</a> <a href="index.php?num='.$num.'&page=5" style="'.$pagestyle1.'">5</a> <span style="'.$pagestyle2.'">...</span>';
} elseif($pageM3 == 0) { // If you are looking at the third page, we only need two previous pages
echo '<a href="index.php?num='.$num.'&page=1" style="'.$pagestyle1.'">1</a> <a href="index.php?num='.$num.'&page=2" style="'.$pagestyle1.'">2</a> <span style="'.$pagestyle2.'">-3-</span> <a href="index.php?num='.$num.'&page=4" style="'.$pagestyle1.'">4</a> <a href="index.php?num='.$num.'&page=5" style="'.$pagestyle1.'">5</a> <a href="index.php?num='.$num.'&page=6" style="'.$pagestyle1.'">6</a> <span style="'.$pagestyle2.'">...</span>';
} elseif($page == $pages) { // If you are looking at last page, we don't need any links to the right
echo '<span style="'.$pagestyle2.'">...</span> <a href="index.php?num='.$num.'&page='.$pageM3.'" style="'.$pagestyle1.'">'.$pageM3.'</a> <a href="index.php?num='.$num.'&page='.$pageM2.'" style="'.$pagestyle1.'">'.$pageM2.'</a> <a href="index.php?num='.$num.'&page='.$pageM1.'" style="'.$pagestyle1.'">'.$pageM1.'</a> <span style="'.$pagestyle2.'">-'.$pages.'-</span>';
} elseif($page+1 == $pages) { // If you are looking at the second last page, we only need link to the last page
echo '<span style="'.$pagestyle2.'">...</span> <a href="index.php?num='.$num.'&page='.$pageM3.'" style="'.$pagestyle1.'">'.$pageM3.'</a> <a href="index.php?num='.$num.'&page='.$pageM2.'" style="'.$pagestyle1.'">'.$pageM2.'</a> <a href="index.php?num='.$num.'&page='.$pageM1.'" style="'.$pagestyle1.'">'.$pageM1.'</a> <span style="'.$pagestyle2.'">-'.$page.'-</span> <a href="index.php?num='.$num.'&page='.$pages.'" style="'.$pagestyle1.'">'.$pages.'</a>';
} elseif($page+2 == $pages) { // If you are looking at the third last page, we only need links to the second last and the last pages
echo '<span style="'.$pagestyle2.'">...</span> <a href="index.php?num='.$num.'&page='.$pageM3.'" style="'.$pagestyle1.'">'.$pageM3.'</a> <a href="index.php?num='.$num.'&page='.$pageM2.'" style="'.$pagestyle1.'">'.$pageM2.'</a> <a href="index.php?num='.$num.'&page='.$pageM1.'" style="'.$pagestyle1.'">'.$pageM1.'</a> <span style="'.$pagestyle2.'">-'.$page.'-</span> <a href="index.php?num='.$num.'&page='.$pageP1.'" style="'.$pagestyle1.'">'.$pageP1.'</a> <a href="index.php?num='.$num.'&page='.$pages.'" style="'.$pagestyle1.'">'.$pages.'</a>';
} else { // else, add links to the three previous and next pages
echo '<span style="'.$pagestyle2.'">...</span> <a href="index.php?num='.$num.'&page='.$pageM3.'" style="'.$pagestyle1.'">'.$pageM3.'</a> <a href="index.php?num='.$num.'&page='.$pageM2.'" style="'.$pagestyle1.'">'.$pageM2.'</a> <a href="index.php?num='.$num.'&page='.$pageM1.'" style="'.$pagestyle1.'">'.$pageM1.'</a> <span style="'.$pagestyle2.'">-'.$page.'-</span> <a href="index.php?num='.$num.'&page='.$pageP1.'" style="'.$pagestyle1.'">'.$pageP1.'</a> <a href="index.php?num='.$num.'&page='.$pageP2.'" style="'.$pagestyle1.'">'.$pageP2.'</a> <a href="index.php?num='.$num.'&page='.$pageP3.'" style="'.$pagestyle1.'">'.$pageP3.'</a> <span style="'.$pagestyle2.'">...</span>';
}
if($page != $pages) { // If you're not looking at the last page -> add links to the next and last page
echo ' | <a href="index.php?num='.$num.'&page='.$pageP1.'" style="color: #000; border-bottom: 1px dotted #990000; font-weight: bold; font-size: 11px;">Next ></a> <a href="index.php?num='.$num.'&page='.$pages.'" style="color: #000; border-bottom: 1px dotted #990000; font-weight: bold; font-size: 11px;">Last >></a>';
} else { // else, make it in plain text
echo ' | <span style="color: #666; font-weight: bold; font-size: 11px;">Next ></span> <span style="color: #666; font-weight: bold; font-size: 11px;">Last >></span>';
}
?></p>
<p style="text-align: center;">Total pages: <strong><?php echo $pages; ?></strong></p>