Hello,
I’m trying to display blog posts with and use ajaxPager.
Overall, it works, except that my blog posts belongs to some categories and I have buttons on the page to filter blog posts by categories. Here is my code :
{% ajaxPartial filters %}
<section id="filtres" class="padding-sm margin-md pb-0">
<div class="container-fluid">
<ul class="filtres row">
<li><a class="btn btn-outline-white {% if post('slug') is empty %}active{% endif %}" href="{{ this|page }}">Tous</a></li>
{% for record in filtres %}
<li><a class="btn btn-outline-white {% if post('slug') == record.slug %}active{% endif %}" data-request="onAjax" data-request-update="{ _self: true, posts: true }" data-request-data="'slug':'{{ record.slug }}'">{{ record.title }}</a></li>
{% endfor %}
</ul>
</div>
</section>
{% ajaxPartial ‘posts’ %}
{% if post('slug') %}
{% set posts = posts.whereRelation('type', 'slug', post('slug')).paginate(10) %}
{% else %}
{% set posts = posts.paginate(10) %}
{% endif %}
<section id="posts" class="margin-md">
<div class="container-fluid grid grid-2">
{% for record in posts %}
<article class="block h100 grid grid-2 gap-0 align-stretch bg-charcoal">
<div class="media">
{% partial 'media' media = record.image width = 300 height = 300 class = 'h100' %}
</div>
<div class="text col gap-0 justify-between fs-sm">
<h3>{{ record.title|str_limit(80) }}</h3>
<div class="bottom">
{{ record.description|raw|html_limit(150) }}
</div>
</div>
</article>
{% endfor %}
</div>
<nav class="pagination-wrapper container col align-center justify-center margin-sm mb-0">
{{ ajaxPager(posts) }}
</nav>
Filters works alone, pagination works alone, but pagination lost the post(‘slug’) data when I click on a page, how can I conserve my post(‘slug’) when I use ajaxPager to paginate only through filtered posts.
thank you