<p>I suggest to use Sprig plugin provide all ajax and other filter related functionality
<a href="https://putyourlightson.com/plugins/sprig" rel="nofollow noreferrer">https://putyourlightson.com/plugins/sprig</a>
check it out.</p>
<p>use your pagination class and get url after that call ajax.</p>
<pre><code>$(document).on('click', '.pagination-link', function(event) {
        event.preventDefault();

        var url = $(this).attr('href');

        $('.loading').show();
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            cache: true,
        })
        .done(function(data, status, xhr) {
            console.log('AJAX Paginate finished. Showing Results to product container')
            $('.feed').html(data).show();

        })
        .fail(function() {
            console.log(&quot;AJAX Paginate Failed. Please review the query and feed template&quot;);
        })
        .always(function() {
            $('.loading').hide();
            console.log(&quot;Hiding Loading bar and Closing pagination call.&quot;);
        });
    });
</code></pre>
<p>Hope it helps...</p>

CC BY-SA 4.0
2021-06-29T12:46:22.487Z
Hi thanks for the plugin suggestion - I will check that out - Is the second part of your answer based on using that plugin or is it a fix to the code that I have posted ahead? If so could I please ask you to post it with the surrounding code as I am having a hard time seeing where to implement it. Thanks for your help - very appreciated
Wally
CC BY-SA 4.0
2021-06-30T08:07:38.687Z
The second answer for your solution. you have to create a js file or inline js. i used your pagination class to grab the url and do the work.
Taher Kathiriya
CC BY-SA 4.0
2021-06-29T11:38:46.337Z
2021-06-29T11:38:46.337Z
Taher Kathiriya
<p>I followed this tutorial here on how to paginate without reloading the page:
<a href="http://craftsnippets.com/articles/dynamic-pagination-for-craft-cms" rel="nofollow noreferrer">http://craftsnippets.com/articles/dynamic-pagination-for-craft-cms</a></p>
<p>it uses Ajax to load in pagination without re-loading or exiting the page.</p>
<p>(it seems to be the most up to date tutorial I could find, but please correct me if I am wrong).</p>
<p>I have this working for one entry (a group of simple fields):</p>
<p>Before pagination:</p>
<p><a href="https://i.sstatic.net/RsYvX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RsYvX.png" alt="enter image description here" /></a></p>
<p>After pagination:</p>
<p><a href="https://i.sstatic.net/LUmbu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/LUmbu.png" alt="enter image description here" /></a></p>
<p>So all is going well - <strong>the problem</strong> is when I need to show more than one of these on the page, I can get the pagination to load, but when I click the next ajax button (to load more content) - it either: Loads all the content together (loads the next page of all three) - or it loads the next page but updates all the content (the three lists) to have the same content.</p>
<p>Some examples:</p>
<p>Each list is added - with there own pagingation - but clicking next updates each list - not just the list that was clicked:</p>
<p><a href="https://i.sstatic.net/LbUgr.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/LbUgr.png" alt="enter image description here" /></a></p>
<p>Image below shows that all paginated elements have moved to the next page instead of just the top one that was clicked on...</p>
<p><a href="https://i.sstatic.net/It218.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/It218.png" alt="enter image description here" /></a></p>
<p>So - What I think is happening is that Ajax is being called for all elements and not just the speicic one that is being clicked on: cards on the table I have spent about 8 dev hours trying to figure this out and could really do with a keen eye that knows more about Ajax than me to point out the mistake:</p>
<p>Here is my code:</p>
<p>Index.twig</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;\ASSETS\CSS\main.css&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;header&gt;

    &lt;/header&gt;

    &lt;body&gt;
        &lt;section class=&quot;grid-col-3 container&quot;&gt;
            {% set tableData = entry.tableData.all() %}
            {% for table in tableData %}
                &lt;div class=&quot;table&quot;&gt;
                    &lt;h3&gt;{{table.alpha}}&lt;/h3&gt;
                    &lt;p&gt;{{table.bravo}}&lt;/p&gt;
                    &lt;p&gt;{{table.charlie|date('m/d/Y')}}&lt;/p&gt;
                &lt;/div&gt;
            {% endfor %}
        &lt;/section&gt;

        {% include 'IMPORT/pagination/dynamic_pagination' with {
            pagination_list: 'IMPORT/pagination/pagination_pages_list'
        } %}


    &lt;/body&gt;

    &lt;!-- &lt;footer&gt;

    &lt;/footer&gt; --&gt;
    
&lt;/body&gt;
</code></pre>
<p>dynamic_pagination.twig</p>
<pre><code>        {# v2 #}
    {% if pagination_list is defined %}
    {% js %}
    
    // AJAX REQUEST DATA
    {% set current_url = craft.request.getRequestUri()|split(craft.request.getPath())[0]~craft.request.getPath() %}
    {% set ajax_data = {
        current_url: current_url,
        pagination_list: pagination_list|hash,
        pagination_parameters: pagination_parameters ?? null,
    } %}
    
    
    // JS SETTINGS
    var loading_class = 'is-loading'
    var pagination_list_class = 'js-pages-list'
    var pagination_wrapper_class = 'js-pages-wrapper'
    var animation_speed = 1000
    
    // TWIG TO JS
    var endpoint_url = '{{url(pagination_endpoint ?? 'pagination_endpoint')}}'
    var url_params = '{{craft.app.request.getQueryStringWithoutPath() is not empty ? '?' ~ craft.app.request.getQueryStringWithoutPath()}}';
    var current_url = '{{current_url}}'
    var page_trigger = '{{craft.app.config.general.pageTrigger}}'
    
    // AJAX REQUEST
    var current_request = null;  
    function change_page(page_number, done){
    
        current_request = $.ajax({
          url: endpoint_url+'/'+page_trigger+page_number+url_params,
          method: 'GET',
          data: {{ajax_data|json_encode|raw}},
          beforeSend: function(){
            if(current_request != null) {
                current_request.abort();
            }
            $('.'+pagination_list_class).addClass(loading_class);
    
            var page = $(&quot;html, body&quot;);
    
            page.on(&quot;scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove&quot;, function(){
               page.stop();
            });
    
            page.animate({ scrollTop: 
                $('.'+pagination_wrapper_class).position().top }, animation_speed, function(){
                page.off(&quot;scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove&quot;);
            });
    
          }
        }).always(function(){
            $('.'+pagination_list_class).removeClass(loading_class);
        }).done(function(data) {
            $('.'+pagination_wrapper_class).html(data);
            if(done){
                done();
            }
        });
    }
    
    // BACK/FORWARD BUTTON
    var initial_page = '{{craft.request.getPageNum()}}'
    window.addEventListener('popstate', function(e) {
        if(e.state){
            change_page(e.state);
        }else{
            change_page(initial_page);
        }
    });
    
    // PAGINATION CLICK EVENT
    $('.'+pagination_wrapper_class).on('click', '[data-number]', function(e){
        e.preventDefault();
        var selected_page = $(this).attr('data-number');
        change_page(selected_page, function(){
            history.pushState(selected_page, null, current_url+'/'+page_trigger+selected_page+url_params);
        });
    });
    
    {% endjs %}    
    
    &lt;div class=&quot;js-pages-wrapper container&quot;&gt;
        {% include pagination_list with {
            pagination_parameters: pagination_parameters ?? null,
        } %}
    &lt;/div&gt;
    
    {% endif %}


pagination_pages_list.twig

{# v1 #}
{# example element query - adjust it to your website #}
{% set tableData = craft.entries.section('home').one().tableData %}
{% set tableData2 = craft.entries.section('home').one().tableData2 %}
{% set tableData3 = craft.entries.section('home').one().tableData3 %}


{% paginate tableData.limit(3) as pageInfo, pageEntries %}
{% paginate tableData2.limit(3) as pageInfo2, pageEntries2 %}
{% paginate tableData3.limit(3) as pageInfo3, pageEntries3 %}


{% if craft.request.isAjax() %}
    {% do pageInfo.setBasePath(craft.request.getParam('current_url')) %}
{% endif %}

{# replace code below with your entries list and pagination component #}
{% include 'IMPORT/components/pagination' %}
&lt;br&gt;
&lt;div class=&quot;js-pages-list grid-col-3&quot;&gt;
{% for entry in pageEntries %}
    &lt;div class=&quot;entryItem&quot;&gt;
        &lt;h3&gt;{{entry.alpha}}&lt;/h3&gt;
        &lt;p&gt;{{entry.bravo}}&lt;/p&gt;
        &lt;p&gt;{{entry.charlie|date('d,m,Y')}}&lt;/p&gt;
    &lt;/div&gt;
{% endfor %}
&lt;/div&gt;

{% include 'IMPORT/components/pagination2' %}
&lt;br&gt;
&lt;div class=&quot;js-pages-list grid-col-3&quot;&gt;
{% for entry in pageEntries2 %}
    &lt;div class=&quot;entryItem&quot;&gt;
        &lt;h3&gt;{{entry.alpha}}&lt;/h3&gt;
        &lt;p&gt;{{entry.bravo}}&lt;/p&gt;
        &lt;p&gt;{{entry.charlie|date('d,m,Y')}}&lt;/p&gt;
    &lt;/div&gt;
{% endfor %}
&lt;/div&gt;

{% include 'IMPORT/components/pagination3' %}
&lt;br&gt;
&lt;div class=&quot;js-pages-list grid-col-3&quot;&gt;
{% for entry in pageEntries3 %}
    &lt;div class=&quot;entryItem&quot;&gt;
        &lt;h3&gt;{{entry.alpha}}&lt;/h3&gt;
        &lt;p&gt;{{entry.bravo}}&lt;/p&gt;
        &lt;p&gt;{{entry.charlie|date('d,m,Y')}}&lt;/p&gt;
    &lt;/div&gt;
{% endfor %}
&lt;/div&gt;
</code></pre>
<p>pagination.twig &lt;&lt;&lt;</p>
<p>I have duplicated this file for each of the lists and changed the just changed the pageInfo to either pageInfo2 or pageInfo3</p>
<pre><code>{# requires pageInfo variable #}

{# settings #}
{% set neighbours = 1 %}

{# symbols #}
{% set prev = '&amp;#10094;' %}
{% set next = '&amp;#10095;' %}
{% set dots = &quot;&amp;hellip;&quot; %}

{# single numeric link #}
{% macro numericLink(url, number, current) %}
&lt;li&gt;
    &lt;a href=&quot;{{url}}&quot; data-number=&quot;{{number}}&quot; class=&quot;pagination-link {{current ? 'is-current' : null}}&quot; aria-label=&quot;{{current ? 'current page'|t : 'go to page'|t ~ ' ' ~ number}}&quot; {{current ? 'aria-current=&quot;page&quot;'}}&gt;{{number}}&lt;/a&gt;
&lt;/li&gt;
{% endmacro %}

{# next/prev link #}
{% macro textLink(url, content, aria, number) %}
&lt;li&gt;
    &lt;a href=&quot;{{url}}&quot; data-number=&quot;{{number}}&quot; class=&quot;pagination-link&quot; aria-label=&quot;{{aria}}&quot;&gt;{{content|raw}}&lt;/a&gt;
&lt;/li&gt;
{% endmacro %}

{# ellipsis #}
{% macro ellipsis(content) %}
&lt;li&gt;
    &lt;span class=&quot;pagination-ellipsis&quot;&gt;{{content|raw}}&lt;/span&gt;
&lt;/li&gt;
{% endmacro %}

{# pagination logic #}
{% if pageInfo is defined and pageInfo.totalPages &gt; 1 %}
{% import _self as self %}

{# seomatic #}
{# https://github.com/nystudio107/craft-seomatic#pagination-and-seo #}
{% if seomatic is defined %}
    {% do seomatic.helper.paginate(pageInfo) %}
{% endif %}


&lt;nav class=&quot;pagination&quot; role=&quot;navigation&quot; aria-label=&quot;{{'pagination'|t}}&quot;&gt;
&lt;ul class=&quot;pagination-list&quot;&gt;

    {# previous #}
    {% if pageInfo.prevUrl %}
        {{ self.textLink(pageInfo.prevUrl, prev, 'previous page'|t, pageInfo.currentPage - 1) }}
    {% endif %}

    {# first #}
    {% if pageInfo.currentPage - neighbours &gt; 1  %}
        {{ self.numericLink(pageInfo.firstUrl, '1') }}
    {% endif %}

    {# ellipsis before current #}
    {% if pageInfo.currentPage - neighbours &gt; 6 %}
        {{ self.ellipsis(dots) }}
    {% endif %}

    {# links before current #}
    {% for page, url in pageInfo.getPrevUrls(neighbours) %}
        {{ self.numericLink(url, page) }}
    {% endfor %}

    {# current #}
    {{ self.numericLink('', pageInfo.currentPage, true) }}

    {# links after current #}
    {% for page, url in pageInfo.getNextUrls(neighbours) %}
        {{ self.numericLink(url, page) }}
    {% endfor %}

    {# ellipsis after current #}
    {% if pageInfo.totalPages - pageInfo.currentPage &gt; neighbours + 1 %}
        {{ self.ellipsis(dots) }}
    {% endif %}

    {# last #}
    {% if pageInfo.currentPage + neighbours &lt; pageInfo.totalPages %}
        {{ self.numericLink(pageInfo.lastUrl, pageInfo.totalPages) }}
    {% endif %}

    {# next #}
    {% if pageInfo.nextUrl %}
        {{ self.textLink(pageInfo.nextUrl, next, 'next page'|t, pageInfo.currentPage + 1) }}
    {% endif %}

&lt;/ul&gt;
&lt;/nav&gt;
{% endif %}
</code></pre>
<p>You can find the full git gist of these files on this link (from the tutorial not my modifed version)</p>
<p><a href="https://gist.github.com/piotrpog/6c8d76a882fef8c82ea8eda99317bf1d" rel="nofollow noreferrer">https://gist.github.com/piotrpog/6c8d76a882fef8c82ea8eda99317bf1d</a></p>
<p>--</p>
<p>I know this is pretty hacky - so if there is any other way that you would do this to make it simpler then please let me know and I would happy to go that route.</p>
<p>Thanks in advance -
W</p>

<craft3><ajax><pagination>
Ajax pagination in Craft
# Ajax pagination in Craft

(Asked by: username_0 on 2021-06-29)

I followed this tutorial here on how to paginate without reloading the page:
http://craftsnippets.com/articles/dynamic-pagination-for-craft-cms
it uses Ajax to load in pagination without re-loading or exiting the page.
(it seems to be the most up to date tutorial I could find, but please correct me if I am wrong).
I have this working for one entry (a group of simple fields):
Before pagination:

After pagination:

So all is going well - the problem is when I need to show more than one of these on the page, I can get the pagination to load, but when I click the next ajax button (to load more content) - it either: Loads all the content together (loads the next page of all three) - or it loads the next page but updates all the content (the three lists) to have the same content.
Some examples:
Each list is added - with there own pagingation - but clicking next updates each list - not just the list that was clicked:

Image below shows that all paginated elements have moved to the next page instead of just the top one that was clicked on...

So - What I think is happening is that Ajax is being called for all elements and not just the speicic one that is being clicked on: cards on the table I have spent about 8 dev hours trying to figure this out and could really do with a keen eye that knows more about Ajax than me to point out the mistake:
Here is my code:
Index.twig




    
    
    Document
    
    




    

    

    
        
            {% set tableData = entry.tableData.all() %}
            {% for table in tableData %}
                
                    {{table.alpha}}
                    {{table.bravo}}
                    {{table.charlie|date('m/d/Y')}}
                
            {% endfor %}
        

        {% include 'IMPORT/pagination/dynamic_pagination' with {
            pagination_list: 'IMPORT/pagination/pagination_pages_list'
        } %}


    

    
    


dynamic_pagination.twig
        {# v2 #}
    {% if pagination_list is defined %}
    {% js %}
    
    // AJAX REQUEST DATA
    {% set current_url = craft.request.getRequestUri()|split(craft.request.getPath())[0]~craft.request.getPath() %}
    {% set ajax_data = {
        current_url: current_url,
        pagination_list: pagination_list|hash,
        pagination_parameters: pagination_parameters ?? null,
    } %}
    
    
    // JS SETTINGS
    var loading_class = 'is-loading'
    var pagination_list_class = 'js-pages-list'
    var pagination_wrapper_class = 'js-pages-wrapper'
    var animation_speed = 1000
    
    // TWIG TO JS
    var endpoint_url = '{{url(pagination_endpoint ?? 'pagination_endpoint')}}'
    var url_params = '{{craft.app.request.getQueryStringWithoutPath() is not empty ? '?' ~ craft.app.request.getQueryStringWithoutPath()}}';
    var current_url = '{{current_url}}'
    var page_trigger = '{{craft.app.config.general.pageTrigger}}'
    
    // AJAX REQUEST
    var current_request = null;  
    function change_page(page_number, done){
    
        current_request = $.ajax({
          url: endpoint_url+'/'+page_trigger+page_number+url_params,
          method: 'GET',
          data: {{ajax_data|json_encode|raw}},
          beforeSend: function(){
            if(current_request != null) {
                current_request.abort();
            }
            $('.'+pagination_list_class).addClass(loading_class);
    
            var page = $("html, body");
    
            page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
               page.stop();
            });
    
            page.animate({ scrollTop: 
                $('.'+pagination_wrapper_class).position().top }, animation_speed, function(){
                page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
            });
    
          }
        }).always(function(){
            $('.'+pagination_list_class).removeClass(loading_class);
        }).done(function(data) {
            $('.'+pagination_wrapper_class).html(data);
            if(done){
                done();
            }
        });
    }
    
    // BACK/FORWARD BUTTON
    var initial_page = '{{craft.request.getPageNum()}}'
    window.addEventListener('popstate', function(e) {
        if(e.state){
            change_page(e.state);
        }else{
            change_page(initial_page);
        }
    });
    
    // PAGINATION CLICK EVENT
    $('.'+pagination_wrapper_class).on('click', '[data-number]', function(e){
        e.preventDefault();
        var selected_page = $(this).attr('data-number');
        change_page(selected_page, function(){
            history.pushState(selected_page, null, current_url+'/'+page_trigger+selected_page+url_params);
        });
    });
    
    {% endjs %}    
    
    
        {% include pagination_list with {
            pagination_parameters: pagination_parameters ?? null,
        } %}
    
    
    {% endif %}


pagination_pages_list.twig

{# v1 #}
{# example element query - adjust it to your website #}
{% set tableData = craft.entries.section('home').one().tableData %}
{% set tableData2 = craft.entries.section('home').one().tableData2 %}
{% set tableData3 = craft.entries.section('home').one().tableData3 %}


{% paginate tableData.limit(3) as pageInfo, pageEntries %}
{% paginate tableData2.limit(3) as pageInfo2, pageEntries2 %}
{% paginate tableData3.limit(3) as pageInfo3, pageEntries3 %}


{% if craft.request.isAjax() %}
    {% do pageInfo.setBasePath(craft.request.getParam('current_url')) %}
{% endif %}

{# replace code below with your entries list and pagination component #}
{% include 'IMPORT/components/pagination' %}


{% for entry in pageEntries %}
    
        {{entry.alpha}}
        {{entry.bravo}}
        {{entry.charlie|date('d,m,Y')}}
    
{% endfor %}


{% include 'IMPORT/components/pagination2' %}


{% for entry in pageEntries2 %}
    
        {{entry.alpha}}
        {{entry.bravo}}
        {{entry.charlie|date('d,m,Y')}}
    
{% endfor %}


{% include 'IMPORT/components/pagination3' %}


{% for entry in pageEntries3 %}
    
        {{entry.alpha}}
        {{entry.bravo}}
        {{entry.charlie|date('d,m,Y')}}
    
{% endfor %}


pagination.twig <<<
I have duplicated this file for each of the lists and changed the just changed the pageInfo to either pageInfo2 or pageInfo3
{# requires pageInfo variable #}

{# settings #}
{% set neighbours = 1 %}

{# symbols #}
{% set prev = '❮' %}
{% set next = '❯' %}
{% set dots = "…" %}

{# single numeric link #}
{% macro numericLink(url, number, current) %}

    {{number}}

{% endmacro %}

{# next/prev link #}
{% macro textLink(url, content, aria, number) %}

    {{content|raw}}

{% endmacro %}

{# ellipsis #}
{% macro ellipsis(content) %}

    {{content|raw}}

{% endmacro %}

{# pagination logic #}
{% if pageInfo is defined and pageInfo.totalPages > 1 %}
{% import _self as self %}

{# seomatic #}
{# https://github.com/nystudio107/craft-seomatic#pagination-and-seo #}
{% if seomatic is defined %}
    {% do seomatic.helper.paginate(pageInfo) %}
{% endif %}





    {# previous #}
    {% if pageInfo.prevUrl %}
        {{ self.textLink(pageInfo.prevUrl, prev, 'previous page'|t, pageInfo.currentPage - 1) }}
    {% endif %}

    {# first #}
    {% if pageInfo.currentPage - neighbours > 1  %}
        {{ self.numericLink(pageInfo.firstUrl, '1') }}
    {% endif %}

    {# ellipsis before current #}
    {% if pageInfo.currentPage - neighbours > 6 %}
        {{ self.ellipsis(dots) }}
    {% endif %}

    {# links before current #}
    {% for page, url in pageInfo.getPrevUrls(neighbours) %}
        {{ self.numericLink(url, page) }}
    {% endfor %}

    {# current #}
    {{ self.numericLink('', pageInfo.currentPage, true) }}

    {# links after current #}
    {% for page, url in pageInfo.getNextUrls(neighbours) %}
        {{ self.numericLink(url, page) }}
    {% endfor %}

    {# ellipsis after current #}
    {% if pageInfo.totalPages - pageInfo.currentPage > neighbours + 1 %}
        {{ self.ellipsis(dots) }}
    {% endif %}

    {# last #}
    {% if pageInfo.currentPage + neighbours < pageInfo.totalPages %}
        {{ self.numericLink(pageInfo.lastUrl, pageInfo.totalPages) }}
    {% endif %}

    {# next #}
    {% if pageInfo.nextUrl %}
        {{ self.textLink(pageInfo.nextUrl, next, 'next page'|t, pageInfo.currentPage + 1) }}
    {% endif %}



{% endif %}

You can find the full git gist of these files on this link (from the tutorial not my modifed version)
https://gist.github.com/piotrpog/6c8d76a882fef8c82ea8eda99317bf1d
--
I know this is pretty hacky - so if there is any other way that you would do this to make it simpler then please let me know and I would happy to go that route.
Thanks in advance -
W

**Tags:** craft3, ajax, pagination

---

## 1 answers

### Answer by username_1 on 2021-06-29. Score: 1 | Accepted answer

I suggest to use Sprig plugin provide all ajax and other filter related functionality
https://putyourlightson.com/plugins/sprig
check it out.
use your pagination class and get url after that call ajax.
$(document).on('click', '.pagination-link', function(event) {
        event.preventDefault();

        var url = $(this).attr('href');

        $('.loading').show();
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            cache: true,
        })
        .done(function(data, status, xhr) {
            console.log('AJAX Paginate finished. Showing Results to product container')
            $('.feed').html(data).show();

        })
        .fail(function() {
            console.log("AJAX Paginate Failed. Please review the query and feed template");
        })
        .always(function() {
            $('.loading').hide();
            console.log("Hiding Loading bar and Closing pagination call.");
        });
    });

Hope it helps...

> **Comments:**
> **username_0**: Hi thanks for the plugin suggestion - I will check that out - Is the second part of your answer based on using that plugin or is it a fix to the code that I have posted ahead? If so could I please ask you to post it with the surrounding code as I am having a hard time seeing where to implement it. Thanks for your help - very appreciated  
> **username_1**: The second answer for your solution. you have to create a js file or inline js. i used your pagination class to grab the url and do the work.  

---

