Dynamic entries limit via dropdown

Question

On a entries (listing) page I'm using pagination and a fixed limit of entries set. I want visitors to be able to select (dropdown) the number of entries that should be listed (limit).

I'm not a Java or AJAX expert can someone show me the way?

<div class="grid-show">
   <select>
      <option value="12">12</option>
      <option value="20">20</option>
      <option value="50">50</option>
   </select>
</div>

{% paginate craft.entries({
    section: 'holidayHomes',
    limit: 12 ,
}) as pageInfo, pageEntries %}

{% for entry in pageEntries %}

      <div class="cdescription">
          <a href="{{ entry.url }}" >{{ entry.title }}</a>
          <p>{{ entry.body | striptags | slice(0,300)~'...' }}</p>
      </div>

{% endfor %}

Answer 1

Somehow you would just need to communicate to your template that you are changing the default limit.

A fairly simple/standard way is through a query string, and then looking for the value of the variable.

The two things you need to accomplish are

1. Setting the query string if someone changes the dropdown box
2. Checking for a value of the query string key in your code.

To set a query string, you could do it a couple of different ways. The easiest way would actually be to submit your form:

<div class="grid-show">
    <form action="" method="get">
        <select name="limit">
            <option value="12">12</option>
            <option value="20">20</option>
            <option value="50">50</option>
        </select>
        <input type="submit" />
    </form>
</div>

The second step involves checking for the value of the query string within your Twig and if it's not set default to 12:

{% paginate craft.entries({
    section: 'holidayHomes',
    limit: craft.request.getParam('limit') ?? 12,
}) as pageInfo, pageEntries %}

If you wanted this to happen via Ajax it would be a bit more involved, but the principle is the same, ie look for a query string variable and use that as your limit.