Hi I’m Gilad

I love data, analysis and visualization. Chief data scientist at beteaworks.

pagination using php, javascript and html

Earlier this week I set out to build a little webapp – essentially a visual, easy-to-use wrapper over a mySQL database which included a wide array of data. Naturally, I set to add pagination to the app, along with filtering functionality. Automatically, I set out to search the web for pre-written modules. I wasted several hours trying semi-documented solutions until I broke down and finally decided to just write it myself.

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).

pagination
pagination example

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]

5 comments to pagination using php, javascript and html

Leave a Reply