I’ve been trying to use Loop Pagination with content shown in a HTML loop, but what actually happens is that the HTML table gets duplicated twice by the ajax code. How can we do this correctly?
I have code of the form:
<table>
<!-- table header.. -->
<Loop...>
<tr>
<td>..field..</td>
</tr>
</Loop>
</table>
<PaginateButtons/>
Using the chrome developer tools it looks like pagination adds content to a div at the top of the page content, and not in the Loop contents?
Hi,
I’m not sure I understand exactly what are you saying. Would you mind providing more details about this? Some screenshots would be useful for me to understand it and replicate it.
Thanks!
Sure, here is a more complete example, but this should be really easy for you to replicate.
I have a page with a tangible block with the following content:
<table>
<tr>
<th>Race</th>
<th>Date & Time</th>
</tr>
<Loop type=results order=desc orderby_field=wpcf-eventdate paged=5>
<tr>
<td><a href="{Field url}"><Field title/></a></td>
<td><Format date="D jS F Y - g:i A" timezone="GMT"><Field wpcf-eventdate/></Format></td>
</tr>
</Loop>
</table>
<PaginateFields>
Page <Field current_page /> of <Field total_pages />
</PaginateFields>
<PaginateButtons />
This gives me a page as follows:
If I then select page 2, I get the new content (the various tr and td elements) inserted in a div at the top of the main page content, before the table:
If I then select page 3, the new content is replaced as follows:
great, thank you for the detailed answer! I’ve been able to replicate it on my end, I’ll let you know if I can come up with a workaround for this or if it is a bug.
hey Chris,
It is indeed a bug.
I already let the devs be aware of this and I will let you know of any updates as soon as I get some! 
