Implementing a Pagination Bar in Susper Angular JS Frontend
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):
<div class=“pagination-property” *ngIf=“noOfPages>1”>
<nav aria–label=“Page navigation” *ngIf=“(items$ | async)?.length!=0”>
- 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.
(click)=”getPresentPage(presentPage-3+num)” href=“#”>
class=“page-number”>{{presentPage-3+num}}</span></span>
<span class=“page-link” *ngIf=“presentPage<4 && num<=noOfPages” [class.active_page]=”num+1 == presentPage“ (click)=”getPresentPage(num+1)”
href=“#”>
class=“page-number”>{{num+1}}</span></span></li>
- 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
<li class=“page-item”><span class=“page-link” (click)=”incPresentPage()”>
</span></li>
<li class=“page-item2” *ngIf=“!getStyle(maxPage)”><span class=“spl” (click)=”incPresentPage()”>
</span></li></ul>
</div>
</nav>
</div>
- 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:
this.presentPage = Math.min(this.noOfPages, this.presentPage + 1);
this.getPresentPage(this.presentPage);
}decPresentPage() {
this.presentPage = Math.max(1, this.presentPage – 1);
this.getPresentPage(this.presentPage);
}
- 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).
return ((this.presentPage) === page);
}
- getStyle() returns true if passed page is the present page, useful to apply different css classes to the active page
this.presentPage = N;
let urldata = Object.assign({}, this.searchdata);
urldata.start = (this.presentPage – 1) * urldata.rows;
this.store.dispatch(new queryactions.QueryServerAction(urldata));}
- 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
Since this could be a very common problem on a lot of websites, this blog deals with a simple hack for it. 
You must be logged in to post a comment.