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

  • What do you mean by "using AJAX"? Are these entries provided by element API endpoint? Jun 13, 2019 at 10:54
  • 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
    Jun 14, 2019 at 19:40
  • "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? Jun 14, 2019 at 20:13
  • 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
    Jun 14, 2019 at 20:41
  • Ok, i believe i have enough info. Jun 15, 2019 at 6:02

3 Answers 3


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 %}
<a href="{{entry.url}}" class="category-{{entry.categoryField.one().id ?? null}}">{{entry.title}}</a>
{% 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.

  • 1
    List.js is also a good option for this kind of front-end filtering and sorting: listjs.com Jun 18, 2019 at 20:04

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 ?? '' %}

<select sprig name="categoryId">
    <option value="">All categories</option>
    {% for category in craft.categories.all() %}
         <option value="{{ category.id }}" {{ category.id == categoryId ? 'selected' }}>{{ category.title }}</option>
    {% endfor %}

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

See more code examples in the Sprig cookbook.


Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: Filtering Entries 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.