<p>You use <code>q</code> instead of <code>order</code> for the query param in the pagination URLs.</p>

CC BY-SA 3.0
2017-04-11T15:08:51.273Z
2017-04-11T15:08:51.273Z
carlcs
<p>Currently I have infinite scroll setup as below, but when changing the ordering of the entries, then loading more through the infinite scroll it's not loading in the order of the entries.</p>

<p><strong>Set Sort Options</strong></p>

<pre><code>    {% set sortOptions = [
        {
            label: 'Name Z - A',
            value: 'title desc'
        },
        {
            label: 'Name A - Z',
            value: 'title asc'
        },
    ] %}

{% set selectedSortOption = craft.request.getParam('order', 'title asc') %}
</code></pre>

<p><strong>Pagination Loop</strong></p>

<pre><code>{% paginate craft.categories.group('university').order(selectedSortOption).limit(1) as pageEntries %}
    &lt;div id="university-widget-wrapper"&gt;

    {% for category in pageEntries %}
      &lt;a class="university-widget w-inline-block" href="{{ category.url }}"&gt;
        &lt;div class="university-widget-image"&gt;&lt;/div&gt;
        &lt;div class="university-widget-content"&gt;
          {% for asset in category.universityLogo %}
            &lt;img class="university-widget-logo" src="{{ asset.url }}" height="40"&gt;
          {% endfor %}
          &lt;p class="small-paragraph"&gt;{{ category.description }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    {% endfor %}
    &lt;/div&gt;


    &lt;div id="pagination"&gt;
      {% if paginate.prevUrl %}
          &lt;a class="button left previous" href="{{ paginate.prevUrl }}?q={{ selectedSortOption }}"&gt;Previous&lt;/a&gt;
      {% endif %}
      {% if paginate.nextUrl %}
          &lt;a class="button right next" href="{{ paginate.nextUrl }}?q={{ selectedSortOption }}"&gt;Next&lt;/a&gt;
      {% endif %}
    &lt;/div&gt;

    {% endpaginate %}
</code></pre>

<p><strong>Javascript Adding Query</strong></p>

<pre><code>{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}
{% includeJs orderJs %}
</code></pre>

<p><strong>Endless Scroll jQuery</strong></p>

<pre><code>&lt;script&gt;
  var ias = jQuery.ias({
    container:  '#university-widget-wrapper',
    item:       '.university-widget',
    pagination: '#pagination',
    next:       '.next'
  });

  ias.extension(new IASSpinnerExtension());            // shows a spinner (a.k.a. loader)
  ias.extension(new IASTriggerExtension({
    offset: 1,
    text: '&lt;a class="button-positive w-button" href="#"&gt;Load More Results&lt;/a&gt;'
  })); // shows a trigger after page 3
  ias.extension(new IASNoneLeftExtension({
    text: 'There are no more pages left to load.'      // override text when no pages left
  }));

&lt;/script&gt;
</code></pre>

<templating>
Endless Scroll + Ordering
# Endless Scroll + Ordering

(Asked by: username_0 on 2017-04-11)

Currently I have infinite scroll setup as below, but when changing the ordering of the entries, then loading more through the infinite scroll it's not loading in the order of the entries.
Set Sort Options
    {% set sortOptions = [
        {
            label: 'Name Z - A',
            value: 'title desc'
        },
        {
            label: 'Name A - Z',
            value: 'title asc'
        },
    ] %}

{% set selectedSortOption = craft.request.getParam('order', 'title asc') %}

Pagination Loop
{% paginate craft.categories.group('university').order(selectedSortOption).limit(1) as pageEntries %}
    

    {% for category in pageEntries %}
      
        
        
          {% for asset in category.universityLogo %}
            
          {% endfor %}
          {{ category.description }}
        
      
    {% endfor %}
    


    
      {% if paginate.prevUrl %}
          Previous
      {% endif %}
      {% if paginate.nextUrl %}
          Next
      {% endif %}
    

    {% endpaginate %}

Javascript Adding Query
{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}
{% includeJs orderJs %}

Endless Scroll jQuery

**Tags:** templating

---

## 1 answers

### Answer by username_1 on 2017-04-11. Score: 2 | Accepted answer

You use `q` instead of `order` for the query param in the pagination URLs.


---

