Searching on Susper most queries will have a number of search results. These results may span over several pages, and hence, a well designed pagination bar becomes essential for easy navigation. This blog deals with how we created the pagination bar in Susper. This is how the pagination bar in Susper looks:
There are a maximum of 10 pages displayed at any point of time.
At times you may have lesser results too:
where you can either directly click on a page or use the Previous and Next buttons for navigation. As you move along the pages, this is how it looks:
We will now see how we go about creating this bar.
The html source code( with a line by line explanation of the code):
- Previous button is used to decrease the current page number, clicking on the first S in ‘Susper’ also accomplishes this task. Notice that this button is to be displayed only if you are not already on the first page of Susper.
- The above lines specify that we want to update our pagination bar only if the user has navigated more than the first three pages
- class.active_page gives correct css for the active page and getStyle() tells whether that particular page is active or not
- getPresentPage() uses the current page number to calculate which results to display
- This part is used to increment the present page, and show the next/SPER message. Notice that it should be displayed only if you are not already on the last page
The attached typescript functions:
- incPresentPage() increments the present page, if possible(that is you have not reached your maximum pages already).
- decPresentPage() decrements the present page, if possible(that is you have not reached page 1 already).
- getStyle() returns true if passed page is the present page, useful to apply different css classes to the active page
- getPresentPage () is used to change the page, and navigate to the page, with the correct rows of data
And you are done! You now have a working pagination bar to plugin at the bottom of your search results!
You can check out this elaborate tutorial on implementing Pagination bars from w3 schools : https://www.w3schools.com/css/css3_pagination.asp