Hi,
Thanks for asking! I'd be happy to help.
Your observation is correct and when a view is set to update paginated results through AJAX, only the content placed between the "[wpv-layout-start]" and "[wpv-layout-end]" tags, is updated when AJAX executes.
For this reason, if the pagination's code is placed outside those tags, they don't update correctly with each AJAX execution.
To overcome this limitation, you can follow this workaround:
1. You can include the pagination code in a special div container with a class "original-pagination", just before the "[wpv-layout-end]" tag.
( screenshot: hidden link )
Example:
<div class="original-pagination">
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]</li>
<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]</li>
</ul>
</div>
2. Next, you can add an empty div container for the pagination's copy, with class "shadow-pagination", just after the "[wpv-layout-end]" tag.
( screenshot: hidden link )
<div class="shadow-pagination"></div>
3. Using some custom CSS code, you can hide the div which holds the actual pagination.
( screenshot: hidden link )
div.original-pagination {
display: none;
}
4. And using some custom JS code, you can move the content from the up-to-date pagination into the shadow copy container:
// function to copy pagination's content from one div to another
function updatePagination() {
jQuery('.shadow-pagination').html('');
jQuery('.original-pagination').contents().appendTo('.shadow-pagination')
}
// execute the updatePagination function on page load and pagination update through AJAX
jQuery( document ).on( 'js_event_wpv_pagination_completed ready', function( event, data ) {
updatePagination();
});
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
