In the previous article PHP Pagination | Set 2, we developed a simple pagination system that was logically correct but it was not visually appealing because of all the page numbers stacked and occupied a lot of screen space. Then what is the remedy? It is simple when a user is looking up a particular page number it can be assumed that he will be moving in a sequential way. For example, if you are on page number 12 we can assume that you will go nearby pages not directly to page number 122. Assuming this, many pagination systems are evolved and made visually appealing as well. Let us take neveropen Pagination system into account. The following figure is of the same.
As you can see, the neveropen Pagination system is a lot better it has an option to see the total number of pages. It has a last and next button as well, and similarly previous and the first button is also present dynamically i.e. based on current page number the combination of these buttons are shown. Now, before beginning to enhance our own pagination system we should note down what are the features that we should go for.
Analysis of Features
- First and foremost, we don’t want to show 150 pages, we will only show a local set of pages based upon the current page number.
- We should also have a previous/next and first/last button for quick navigation.
- If you think, a user’s movements can be classified into three classes. Sequential, Random, and Hybrid. By creating a link to local pages and the next/previous button we have taken care of the Sequential Movement. For Random movement, we should have an input field where the user may type in the particular page number and the rest of the navigation links should change accordingly.
As we have identified the features to be added, let us jump to the final source code and explain how we achieved the requirements.
Final Source Code
<!DOCTYPE html> <html> <head> <title>ProGeeks Cup 2.0</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" <style> .inline{ display: inline-block; float: right; margin: 20px 0px; } input, button{ height: 34px; } </style> </head> <body> <?php require_once "connection.php"; $limit = 10; if (isset($_GET["page"])) { $pn = $_GET["page"]; } else { $pn=1; }; $start_from = ($pn-1) * $limit; $sql = "SELECT * FROM table1 LIMIT $start_from, $limit"; $rs_result = mysql_query ($sql); ?> <div class="container"> <br> <div> <h1>ProGeeks Cup 2.0</h1> <p>This page is just for demonstration of Basic Pagination using PHP.</p> <table class="table table-striped table-condensed table-bordered"> <thead> <tr> <th width="10%">Rank</th> <th>Name</th> <th>College</th> <th>Score</th> </tr> </thead> <tbody> <?php while ($row = mysql_fetch_array($rs_result, MYSQL_ASSOC)) { ?> <tr> <td><?php echo $row["rank"]; ?></td> <td><?php echo $row["name"]; ?></td> <td><?php echo $row["college"]; ?></td> <td><?php echo $row["score"]; ?></td> </tr> <?php }; ?> </tbody> </table> <div> <ul class="pagination"> <?php $sql = "SELECT COUNT(*) FROM table1"; $rs_result = mysql_query($sql); $row = mysql_fetch_row($rs_result); $total_records = $row[0]; $total_pages = ceil($total_records / $limit); $k = (($pn+4>$total_pages)?$total_pages-4:(($pn-4<1)?5:$pn)); $pagLink = ""; if($pn>=2){ echo "<li><a href='index.php?page=1'> << </a></li>"; echo "<li><a href='index.php?page=".($pn-1)."'> < </a></li>"; } for ($i=-4; $i<=4; $i++) { if($k+$i==$pn) $pagLink .= "<li class='active'><a href='index.php?page=".($k+$i)."'>".($k+$i)."</a></li>"; else $pagLink .= "<li><a href='index.php?page=".($k+$i)."'>".($k+$i)."</a></li>"; }; echo $pagLink; if($pn<$total_pages){ echo "<li><a href='index.php?page=".($pn+1)."'> > </a></li>"; echo "<li><a href='index.php?page=".$total_pages."'> >> </a></li>"; } ?> </ul> <div class="inline"> <input id="pn" type="number" min="1" max="<?php echo $total_pages?>" placeholder="<?php echo $pn."/".$total_pages; ?>" required> <button onclick="go2Page();">Go</button> </div> </div> </div> </div> <script> function go2Page() { var pn = document.getElementById("pn").value; pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn)); window.location.href = 'index.php?page='+pn; } </script> </body> </html> |
Whoa! That is too big to understand! Fear not, we have only included those that are highlighted and that also includes some CSS styling, some new HTML markup and a bit of logic. Let us not wait any further in explaining what we have changed and unveil the final result.
Code for Sequential Movement
The idea behind this code is very simple. We want to take a middle index $k and we want to print the neighbor pages to create the sequential links. Before echoing the sequence we echo the previous and first-page links if the current page is not the first page. Similarly, after echoing the sequence we echo the next and last-page links if the current page is not the last page. In this case, we intend to show a total of 9 links of pages that form the sequence.
// K is assumed to be the middle index. $k = (($pn+4>$total_pages)?$total_pages-4:(($pn-4<1)?5:$pn)); // Show prev and first-page links. if($pn>=2){ echo "<li><a href='index.php?page=1'> << </a></li>"; echo "<li><a href='index.php?page=".($pn-1)."'> < </a></li>"; } // Show sequential links. for ($i=-4; $i<=4; $i++) { if($k+$i==$pn) $pagLink .= "<li class='active'><a href='index.php?page=".($k+$i)."'>".($k+$i)."</a></li>"; else $pagLink .= "<li><a href='index.php?page=".($k+$i)."'>".($k+$i)."</a></li>"; }; echo $pagLink; // Show next and last-page links. if($pn<$total_pages){ echo "<li><a href='index.php?page=".($pn+1)."'> > </a></li>"; echo "<li><a href='index.php?page=".$total_pages."'> >> </a></li>"; } |
Code for Random Movement
The idea behind this is also fairly simple, we will provide an input field where the user can input any numerical value, after which we will check if the given value is valid and then we will go to the page. This doesn’t require much of PHP as it can be done using JS. PHP is used only to give us the value of $total_pages present etc. In order to develop the above-mentioned feature, we first added the following markup and then added the function to handle click event.
<div class="inline"> <input id="pn" type="number" min="1" max="<?php echo $total_pages?>" placeholder="<?php echo $pn."/".$total_pages; ?>" required> <button onclick="go2Page();">Go</button> </div> |
function go2Page() { var pn = document.getElementById("pn").value; // Check if pn is between the max and min. pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn)); window.location.href = 'index.php?page=' + pn; } |
The rest of the updates are just some CSS to make it look a bit regular. Lastly, the final result that we get is shown in the figure below.
I had a blast creating this Pagination system and am quite happy that it turned out to be decent. In case you need the source files and dataset, feel free to visit my repository. Happy Learning.
