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 GeeksforGeeks Pagination system into account. The following figure is of the same.
As you can see, the GeeksforGeeks 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
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.
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.
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.
- PHP Pagination | Set 2
- PHP Pagination | Set 1
- CSS | Pagination
- Bootstrap 4 | Pagination
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- How to insert HTML content into an iFrame using jQuery?
- How to use jQuery in Angular ?
- How do you get the length of a string in JQuery?
- How to add innerHTML to print page?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.