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

  • Tangentially related: Here’s how pagination works at Instructables. We use page numbers and condense them to give the user an idea of where they are, how many pages there are, and allow them to jump around a bit without presenting too many options:

    http://www.instructables.com/tag/type:id/
    http://www.instructables.com/tag/type:id/?&offset=160

    (scroll to the bottom)

    Our code isn’t really relevant to your post, but yes, it’s messy :)

  • Thanks Eric.
    I actually implemented exactly what you guys have on instructables (the site is not available online yet).
    I was just really surprised that there’s no simpler php solution to this extremely basic feature of a website.

  • Jared

    Great script it is working well with what I need it to do, but I have one problem it is generating an extra page. Any idea why this would be happening?

  • Ravi

    Hi ,

    Thank you for sharing the pagination concept!!. it is helpful for me.. but The pagination.html & pagination.php links are not working (Returns 404 error!!). Please check!!..

  • Looking for pagination information can came across your page.

    Being that your article was published awhile ago, any changes to the code or further insights on the subject?

    I see that you still have two broken links mentioned in the previous post.

    thanks for taking the time to publish this info as it has been helpful to me

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>