I must say, it was actually much more complex than I’d thought. When controling pagination of a site, especially with dynamic content being pulled from a database, the application constantly needs to figure out where in relation to the database results, the user is browsing, how many pages forward or backward exist, and all the end cases (first/last pages).

In this example I used the jquery library to make the AJAX calls (no need to usually). The ajax call updates the #results div with the content. The .php file holds the majority of the functionality – calculates the number of pages (according to # of entries we want per page), then according to the current page, calculates how many before and after, creates the links, and makes sure the current page is not clickable.

Here are links to the files: (note – you need to insert your own database info in the php file for this to work)

pagination.html

pagination.php

And below is the .php code I created:

——————————————————–>>

<?php

$mysql = mysql_connect(”***your host***”,”***your username***”,”**your password***”) or die(mysql_error());
mysql_select_db(”****your db****”,$mysql) or die(mysql_error());

$NUMPADDING=6; // number of links on either side of the current page

$pagenum = $_GET['pagenum'];
$page_rows = $_GET['page_rows'];

$data = mysql_query(”SELECT * FROM entries”) or die(mysql_error());
$rows = mysql_num_rows($data);

//This tells us the page number of our last page
$last = ceil($rows/$page_rows);

// SQL QUERY
//This sets the range to display in our query
$max = ‘limit ‘ .($pagenum – 1) * $page_rows .’,’ .$page_rows;

//echo “SELECT * FROM entries $max”;

$data_p = mysql_query(”SELECT * FROM ***your tablename*** $max”) or die(mysql_error());

// FIRST
echo’<div id=”pagination”>
<ul id=”pagination”>
<li class=”first”><a href=”javascript:getPage(\’1\’,\”.$page_rows.’\',\’this\’)”>first</a></li>’;

// PREV
if ($pagenum>1) {
$prevpage=$pagenum-1;
echo’<li class=”previous”><a href=”javascript:getPage(\”.$prevpage.’\',\”.$page_rows.’\',\’this\’)”><- previous</a></li>’;
//echo’…’;
// —PADDING

if ($pagenum-$NUMPADDING>0)
$start=$pagenum-$NUMPADDING;
else
$start=1;

for ($i=$start;$i<$pagenum;$i++){
$tmp=$i;
echo’<li><a href=”javascript:getPage(\”.$tmp.’\',\”.$page_rows.’\',\’this\’)”>’.$tmp.’</a></li>’;
}
}
else
// no prev necessary
echo’<li class=”previous-off”><- previous</li>’;

// CURRENT PAGE
echo’<li class=”active”>’.$pagenum.’</li>’;

// NEXT
if ($pagenum<$last) {
// PADDING+++
if ($last-$pagenum > $NUMPADDING)
$end=$NUMPADDING;
else
$end=$last-$pagenum;

for ($i=1;$i<=$end;$i++){
$tmp=$pagenum+$i;
echo’<li><a href=”javascript:getPage(\”.$tmp.’\',\”.$page_rows.’\',\’this\’)”>’.$tmp.’</a></li>’;
}
//echo’…’;
$nextpage=$pagenum+1;
echo’<li class=”next”><a href=”javascript:getPage(\”.$nextpage.’\',\”.$page_rows.’\',\’this\’)”>next -></a></li>’;
}
else
// no prev necessary
echo’<li class=”next-off”>next -></li>’;

//LAST
echo’
<li class=”last”><a href=”javascript:getPage(\”.$last.’\',\”.$page_rows.’\',\’this\’)”>last</a></li>
</ul><br/>
</div>
‘;
?>

[tags]pagination,javascript,js,php,jquery,html,tutorial,code,example[/tags]

]]> http://giladlotan.com/blog/2009/03/pagination-using-php-javascript-and-html/feed/ 4 http://giladlotan.com/blog/2008/09/making-rounded-divs/ http://giladlotan.com/blog/2008/09/making-rounded-divs/#comments Mon, 22 Sep 2008 21:52:27 +0000 http://giladlotan.com/blog/?p=387 Here’s the image-based method I used to make rounded DIVs. Use the following HTML code along with the CSS properties and .gif files. The results are a lot of fun and look quite good:

[tags]html,code,programming,round,div,css[/tags]

Here’s the image-based method I used to make rounded DIVs. Use the following HTML code along with the CSS properties and .gif files. The results are a lot of fun and look quite good:

[tags]html,code,programming,round,div,css[/tags]

]]>