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! 
Hi, has there been any progress please?
Hi Chris,
I know it’s been a while. We want to resolve all of our bugs so you guys can enjoy the plugin at its best; however, there were more time-pressing issues, and we still need to fix this.
On the other hand, I want to ensure you know that your issue has not been forgotten and is definitely on our to-do list. Just spoke with the devs the other week, so we will get it fixed soon!
Ok great, that would be appreciated!
Hi @chrisnappin - I’ve tried to solve this, and found that there’s a technical limitation that prevents supporting pagination within a table element.
What’s happening is that L&L needs a div element to know where to render the paginated items, but the browser moves it to before the table because only certain elements like tr are allowed to be direct children of table.
There might be a tricky workaround, to detect when the pagination is within a table and pass some information via JavaScript so that it knows which rows are paginated items, and to replace them directly instead of using the div container. However, this is complex and requires extending how pagination works on both the server and browser sides.
In the meantime, probably it’s necessary to rebuild the table without using the table element to get around its limitation, to be able to have paginated rows.
