How to use Loop and Pagination with HTML tables (content being doubled)

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 header.. -->



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?


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.


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:

    <th>Date &amp; Time</th>

<Loop type=results order=desc orderby_field=wpcf-eventdate paged=5>
    <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>

  Page <Field current_page /> of <Field total_pages />

<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! :nerd_face: