Show/Hide pagination Previous or next link based on remaining pages

[topelovely]

Please I have a webapp list. I want to show or hide the previous and next pagination url based on the number of pages left and user clicks the pagination url:

Please this is my code:

      <div class="pagination">

          <div class="paginationtextblock"><a href="{{testimonialWinners.pagination.previousPageUrl}}">Previous</a></div>

          <div class="paginationtextblock">Page {{testimonialWinners.pagination.currentPage}}</div>

          <div class="paginationtextblock" style="hidden"><a href="{{testimonialWinners.pagination.nextPageUrl}}">Next</a></div>

      </div>

    </div>    

Thanks in anticipation

[Liam Dilley]

Tip: Have a look at the url as you paginate.

[topelovely]

Hi Liam this is what I got from the url as I paginate: ?PageID=17992214&A=WebApp&CCID=29948&Page=4&Items=10

[Stephen_Blignault1]

Look at the pagination URLs we did on this website (still in development)
Contributor Picks

One method we chose to go with was simply placing "?A=WebApp&Page=2" at the end of the URL like so: /contributor-picks?A=WebApp&Page=2

Then with the following code:

{% assign pageURL = globals.get.id -%}<!--- get the current page ID -->

{% assign previousPageUrl = "" -%}

{% assign nextPageUrl = 2 -%}

{% if globals.get.Page > 1 -%}<!-- if &Page exists and is greater than 1, then we know we are on a pagination page. -->

{% assign previousPageUrl = globals.get.Page | minus: 1 -%}

{% assign nextPageUrl = globals.get.Page | plus: 1 -%}

{% endif -%}

Then once you have your variables, you can do things like:

{% if pagination.previousPageUrl != null -%}

        <li><a href="{{ pageURL }}?A=WebApp&Page={{ previousPageUrl }}"><i class="material-icons">&#xE5C4;</i></a></li>

{% endif -%}

-- AND --

{% if pagination.nextPageUrl != null -%}

        <li><a href="{{ pageURL }}?A=WebApp&Page={{ nextPageUrl }}"><i class="material-icons">&#xE5C8;</i></a></li>

{% endif -%}

This is one method we did. There are more. Hope this gives inspiration to find a solution for your situation.

[topelovely]

Thanks Stephen, I will test and let you know.

[topelovely · Accepted solution]

Hi Stephen, thanks once again for the contribution. But after looking at your implementation code and what is returned through json. I carved my own solution, which I found straight found and doesn't require so much assign. See it below:

         <div class="pagination">

               {% if collectionname.pagination.previousPageUrl != null -%}

             <div class="paginationtextblock"><a href="{{collectionname.pagination.PreviousPageUrl}}">Previous</a></div> 

        {% endif -%}

             <div class="paginationtextblock">Page {{collectionname.pagination.currentPage}} of {{collectionname.pagination.numberOfPages}}</div>

              {% if collectionname.pagination.nextPageUrl != null -%}

               <div class="paginationtextblock"><a href="{{collectionname.pagination.nextPageUrl}}">Next</a></div>

        {% endif -%} 

      </div>

See it in action here: Schools in the Astymin schools support program

I think the last BC update presented more options for pagination which allows us to do more based on the json tags available. Thanks once again for inspiring me.