The pagination shortcode was inside of the "Loop Editor" and that way, it can be updated after changing the page using AJAX. It will only work if you deactivate AJAX on the view.
To be able to update the pagination while using AJAX, the shortcodes should go into the "Search and Pagination" section of the archive template.
But this will force the pagination to be at the top of the results, near the archive filters, instead of being at the bottom of the results. We can work around this with a custom Javascript code, that will move the pagination to the bottom of the results.
The solution consists of:
- Putting the pagination shortcode inside a hidden div.
- Creating a target div inside the archive template where we will move the pagination.
- Adding the custom Javascript code to move the pagination, and making sure, it will be executed when the page loads and after each AJAX pagination, also after performing a search.
1. Putting the pagination shortcode inside a hidden div.
We can do this with the following code, note the "pagination-source" class that we will be using in our custom Javascript code, and the style(display: none) to hide it:
<div class="pagination-source" style="display: none;">
[wpv-pager-archive-nav-links previous_next_links="true"]
</div>
2. Creating a target div inside the archive template where we will move the pagination.
We can do this with the following code, note the "pagination-target" class that we will be using in our custom Javascript code:
<div class="pagination-target"></div>
We can put this code in the "Loop editor", or in the "Output Editor" after wpv-layout-meta-html.
3. Custom Javascript code to move the pagination
We can do it with the following code:
// function to move the pagination from .pagination-source to .pagination-target
function my_move_pagination(event, data) {
jQuery('.pagination-target').html( jQuery('.pagination-source').html() );
}
// When the page first loads
jQuery( document ).on( 'ready', my_move_pagination );
// When AJAX pagination ends
jQuery( document ).on( 'js_event_wpv_pagination_completed', my_move_pagination );
// When an AJAX search ends
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', my_move_pagination );
I hope this helps. Let me know if you have any questions.
