Last active
September 10, 2019 09:14
-
-
Save os-kingsley/766f2f47a6afc031a01a7458c69c655a to your computer and use it in GitHub Desktop.
Customised Pagination in twig with dots using bootstrap 4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav aria-label="Page navigation example" style="font-size: 17px;"> | |
<!-- | |
Make Previous button enabled if the record.currentPage is greater than 1 else disable the button | |
--> | |
{% if record.hasPages %} | |
<ul class="pagination justify-content-center"> | |
{% if record.currentPage > 1 %} | |
<li class="page-item"> | |
<a class="page-link" href="{{ record.previousPageUrl }}" rel="prev" >Previous</a> | |
</li> | |
{% else %} | |
<li class="page-item disabled"> | |
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> | |
</li> | |
{% endif %} | |
{% if record.currentPage > 3 %} | |
<li class="page-link"><a href="{{ record.url(1) }}">1</a></li> | |
{% endif %} | |
{% if record.currentPage > 4 %} | |
<li class="page-link"><span>...</span></li> | |
{% endif %} | |
{% for page in range(1, record.lastPage) %} | |
{% if page >= record.currentPage - 2 and page <= record.currentPage + 2 %} | |
{% if page == record.currentPage %} | |
<li class="page-item active"><a class="page-link">{{ page }}</a></li> | |
{% else %} | |
<li class="page-link"><a href="{{ record.url(page) }}">{{ page }}</a></li> | |
{% endif %} | |
{% endif %} | |
{% endfor %} | |
{% if record.currentPage < record.lastPage - 3%} | |
<li class="page-link"><span>...</span></li> | |
{% endif %} | |
{% if record.currentPage < record.lastPage - 2 %} | |
<li class="page-link"><a href="{{ record.url(record.lastPage) }}">{{ record.lastPage }}</a></li> | |
{% endif %} | |
<!-- check if record has more pages to either enable or disable the next button--> | |
{% if record.hasMorePages %} | |
<li class="page-item"> | |
<a class="page-link" href="{{ record.nextPageUrl }}">Next</a> | |
</li> | |
{% else %} | |
<li class="page-item disabled"> | |
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a> | |
</li> | |
{% endif %} | |
</ul> | |
{% endif %} | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment