<p>For filtering entries using JS, you could use <a href="https://isotope.metafizzy.co/filtering.html" rel="nofollow noreferrer">Isotope JS</a></p>

<p>First, in your markup give each entry <code>class</code> attribute representing id of category that entry has:</p>

<pre><code>{% for entry in entries %}
&lt;a href="{{entry.url}}" class="category-{{entry.categoryField.one().id ?? null}}"&gt;{{entry.title}}&lt;/a&gt;
{% endfor %}
</code></pre>

<p>Then, you will be able to show entries related only to a specific category using JS code like this:</p>

<pre><code>$grid.isotope({ filter: '.category-5' });
</code></pre>

<p>..assuming you defined your isotope grid earlier as <code>$grid</code>. In this example, Isotope will show all entries related to the category with id 5.</p>

CC BY-SA 4.0
2019-06-18T20:04:42.890Z
List.js is also a good option for this kind of front-end filtering and sorting: https://listjs.com/
Dalton Rooney
CC BY-SA 4.0
2019-06-15T06:45:35.590Z
2019-06-15T06:45:35.590Z
Piotr Pogorzelski
<p>The <a href="https://putyourlightson.com/plugins/sprig" rel="nofollow noreferrer">Sprig</a> plugin makes this rather straightforward to achieve. Any time the category is changed, the component will re-render itself and display the resulting entries.</p>
<pre><code>{{ sprig('_components/filteredEntries') }}

{{ sprig.script }}
</code></pre>
<pre><code>{#--- _components/filteredEntries ---#}

{% set categoryId = categoryId ?? '' %}

&lt;select sprig name=&quot;categoryId&quot;&gt;
    &lt;option value=&quot;&quot;&gt;All categories&lt;/option&gt;
    {% for category in craft.categories.all() %}
         &lt;option value=&quot;{{ category.id }}&quot; {{ category.id == categoryId ? 'selected' }}&gt;{{ category.title }}&lt;/option&gt;
    {% endfor %}
&lt;/select&gt;


{% for entry in craft.entries.relatedTo(categoryId).all() %}
    {{ entry.title }}
{% endfor %}
</code></pre>
<p>See more code examples in the <a href="https://putyourlightson.com/sprig-cookbook" rel="nofollow noreferrer">Sprig cookbook</a>.</p>

CC BY-SA 4.0
2020-10-14T08:25:21.390Z
2020-10-14T08:32:12.933Z
2020-10-14T08:32:12.933Z
Ben Croker
<p>Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: <a href="https://github.com/Hestabit/craft-ajaxinate/blob/master/README.md" rel="nofollow noreferrer">Filtering Entries</a> in Craft CMS.</p>
<p>If you want to do it by yourself, you have to use the Ajax to toggle the data on user input.</p>
<p>You have to create a small plugin or module and use the controller to handle the ajax call.</p>
<p>In Craft Cms there is no inbuilt method available for the frontend to fire the ajax.</p>

CC BY-SA 4.0
2019-09-21T18:18:31.937Z
2020-10-15T06:21:39.440Z
2020-10-15T06:21:39.440Z
inrsaurabh
<p>How would I sort blog entries displayed using AJAX?</p>

<p>What I want to achieve is initially show all posts from a channel (All) but then let my users sort through these posts with a sub navigation using the categories I've applied to the channel entries.</p>

<p>I can doing basic templating in CraftCMS but there seems to be very little clear documentation on how to this.</p>

<p>Thank you</p>

CC BY-SA 4.0
2019-06-13T10:54:43.553Z
What do you mean by "using AJAX"? Are these entries provided by element API endpoint?
Piotr Pogorzelski
CC BY-SA 4.0
2019-06-14T19:40:18.887Z
Hello, what I mean is filter these category entries without the page reloading. Unsure if "these entries provided by element API endpoint", they are simply entries I've added in Craft. Thank you for asking.
Spheriri
CC BY-SA 4.0
2019-06-14T20:13:23.400Z
"AJAX" implies you are querying some kind of external page. So you are only using javascript to filter entries, yes? And no additional request to any external source. Do these entries need to be filtered without reloading page or can it be with reloading it - no javascript?
Piotr Pogorzelski
CC BY-SA 4.0
2019-06-14T20:41:56.370Z
Ah ok. Yes I'd be making no additional request to any external source, just filtering the entries by the categories that are applied to the entries. I could just load another page with the appropriate entries but I'd prefer to avoid loading another page (believe it's a better UX).
Spheriri
CC BY-SA 4.0
2019-06-15T06:02:45.233Z
Ok, i believe i have enough info.
Piotr Pogorzelski
CC BY-SA 4.0
2019-08-21T11:52:54.577Z
is your problem solved @Spheriri
inrsaurabh
<templating><categories><ajax><navigation>
Filter entries with AJAX
# Filter entries with AJAX

(Asked by: username_0 on 2019-06-12)

How would I sort blog entries displayed using AJAX?

What I want to achieve is initially show all posts from a channel (All) but then let my users sort through these posts with a sub navigation using the categories I've applied to the channel entries.

I can doing basic templating in CraftCMS but there seems to be very little clear documentation on how to this.

Thank you

**Tags:** templating, categories, ajax, navigation
> **Comments:**
> **username_1**: What do you mean by "using AJAX"? Are these entries provided by element API endpoint?  
> **username_0**: Hello, what I mean is filter these category entries without the page reloading. Unsure if "these entries provided by element API endpoint", they are simply entries I've added in Craft. Thank you for asking.  
> **username_1**: "AJAX" implies you are querying some kind of external page. So you are only using javascript to filter entries, yes? And no additional request to any external source. Do these entries need to be filtered without reloading page or can it be with reloading it - no javascript?  
> **username_0**: Ah ok. Yes I'd be making no additional request to any external source, just filtering the entries by the categories that are applied to the entries. I could just load another page with the appropriate entries but I'd prefer to avoid loading another page (believe it's a better UX).  
> **username_1**: Ok, i believe i have enough info.  
> **username_2**: is your problem solved @Spheriri  

---

## 3 answers

### Answer by username_1 on 2019-06-15. Score: 2

For filtering entries using JS, you could use Isotope JS
First, in your markup give each entry class attribute representing id of category that entry has:
{% for entry in entries %}
{{entry.title}}
{% endfor %}

Then, you will be able to show entries related only to a specific category using JS code like this:
$grid.isotope({ filter: '.category-5' });

..assuming you defined your isotope grid earlier as $grid. In this example, Isotope will show all entries related to the category with id 5.

> **Comments:**
> **username_3**: List.js is also a good option for this kind of front-end filtering and sorting: https://listjs.com/  

---

### Answer by username_4 on 2020-10-14. Score: 2

The Sprig plugin makes this rather straightforward to achieve. Any time the category is changed, the component will re-render itself and display the resulting entries.
{{ sprig('_components/filteredEntries') }}

{{ sprig.script }}

{#--- _components/filteredEntries ---#}

{% set categoryId = categoryId ?? '' %}


    All categories
    {% for category in craft.categories.all() %}
         {{ category.title }}
    {% endfor %}



{% for entry in craft.entries.relatedTo(categoryId).all() %}
    {{ entry.title }}
{% endfor %}

See more code examples in the Sprig cookbook.


---

### Answer by username_2 on 2019-09-21. Score: 2

Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: [Filtering Entries](https://github.com/Hestabit/craft-ajaxinate/blob/master/README.md) in Craft CMS.

If you want to do it by yourself, you have to use the Ajax to toggle the data on user input.

You have to create a small plugin or module and use the controller to handle the ajax call.

In Craft Cms there is no inbuilt method available for the frontend to fire the ajax.


---

