HTML

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-bar"> <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. <li class="page-item" *ngFor="let num of getNumber(maxPage)"><span class="page-link" *ngIf="presentPage>=4 && presentPage-3+num<=noOfPages" [class.active_page]="getStyle(presentPage-3+num)" (click)="getPresentPage(presentPage-3+num)" href="#"> [class.active_page]="getStyle(presentPage-3+num)" class="page-text">U 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.active_page]="num+1 == presentPage" class="page-text">U</span> 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()"> class="page-text next">SPER </span></li> <li class="page-item2" *ngIf="!getStyle(maxPage)"><span class="spl" (click)="incPresentPage()"> class="arrow">> class="side-text">Next </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: incPresentPage() { 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). getStyle(page) { return ((this.presentPage) === page); } getStyle() returns true if passed page is the present page, useful to apply different css classes to the active page getPresentPage(N) { 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