<div class="pagination">
<ul class="pagination__list">
<li class="pagination__item pagination__item--first">
<a href="#" class="pagination__link">First</a>
</li>
<li class="pagination__item pagination__item--prev">
<a href="#" class="pagination__link">Previous</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">1</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">2</a>
</li>
<li class="pagination__item">
<span class="pagination__span">...</span>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">4</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">5</a>
</li>
<li class="pagination__item pagination__item--page">
<span class="pagination__link">6</span>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">7</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">8</a>
</li>
<li class="pagination__item">
<span class="pagination__span">...</span>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">11</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">12</a>
</li>
<li class="pagination__item pagination__item--next">
<a href="#" class="pagination__link">Next</a>
</li>
<li class="pagination__item pagination__item--last">
<a href="#" class="pagination__link">Last</a>
</li>
</ul>
</div>
{% macro li(item, class) %}
<li class="pagination__item {{ class }}">
{% if item.url %}
<a href="{{ item.url }}" class="pagination__link">{{ item.text }}</a>
{% else %}
<span class="pagination__link">{{ item.text }}</span>
{% endif %}
</li>
{% endmacro %}
{% macro separator() %}
<li class="pagination__item">
<span class="pagination__span">...</span>
</li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
<div class="pagination">
<ul class="pagination__list">
{% if data.page > 1 %}
{% if data.first %}
{{ ul.li(data.first, 'pagination__item--first') }}
{% endif %}
{% if data.previous %}
{{ ul.li(data.previous, 'pagination__item--prev') }}
{% endif %}
{% if data.extraPagesLimit %}
{% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
{{ ul.li(data.items[i]) }}
{% endfor %}
{% endif %}
{% if data.nearbyPagesLimit %}
{% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
{{ ul.separator() }}
{% endif %}
{% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
{{ ul.li(data.items[i]) }}
{% endfor %}
{% endif %}
{% endif %}
{{ ul.li(data.current, 'pagination__item--page') }}
{% if data.page < data.pages %}
{% if data.nearbyPagesLimit %}
{% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
{{ ul.li(data.items[i]) }}
{% endfor %}
{% if (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
{{ ul.separator() }}
{% endif %}
{% endif %}
{% if data.extraPagesLimit %}
{% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
{{ ul.li(data.items[i]) }}
{% endfor %}
{% endif %}
{% if data.next %}
{{ ul.li(data.next, 'pagination__item--next') }}
{% endif %}
{% if data.last %}
{{ ul.li(data.last, 'pagination__item--last') }}
{% endif %}
{% endif %}
</ul>
</div>
{% endif %}
{
"language": "en-US",
"data": {
"first": {
"text": "First",
"url": "#"
},
"last": {
"text": "Last",
"url": "#"
},
"next": {
"text": "Next",
"url": "#"
},
"previous": {
"text": "Previous",
"url": "#"
},
"current": {
"text": "6",
"url": false
},
"page": 6,
"pages": 12,
"nearbyPagesLimit": 2,
"extraPagesLimit": 2,
"items": {
"1": {
"text": "1",
"url": "#"
},
"2": {
"text": "2",
"url": "#"
},
"3": {
"text": "3",
"url": "#"
},
"4": {
"text": "4",
"url": "#"
},
"5": {
"text": "5",
"url": "#"
},
"6": {
"text": "6",
"url": "#"
},
"7": {
"text": "7",
"url": "#"
},
"8": {
"text": "8",
"url": "#"
},
"9": {
"text": "9",
"url": "#"
},
"10": {
"text": "10",
"url": "#"
},
"11": {
"text": "11",
"url": "#"
},
"12": {
"text": "12",
"url": "#"
}
}
}
}
.pagination__list {
list-style: none;
padding: 0;
margin: 0;
}
.pagination__item {
display: inline-block;
}
import './pagination.scss';