Pagination and easy-fancybox

I’m not familiar with TablePress. Can you share a link?

Hi,

thanks for your question, and sorry for the trouble.

You are probably affected by the problem “My events don’t work on the second page” from https://www.datatables.net/faqs/index#events (with the DataTables JS library, which TablePress uses for pagination).

One fix for this would be to execute the registration for the fancyboxes before the DataTables code is run, or to use event delegation somehow.

Regards,
Tobias

TablePress is Tobias’ excellent plugin – https://tablepress.org/

Tobias, thanks for pointing me in the right direction.

Hi,

sure, you are very welcome. I hope this helps!

Best wishes,
Tobias

@tobiasbg – thanks for stepping in ??

Question: does TablePress fire an event after new content has been loaded? Like Jetpack Infinite Scroll throwing a ‘post-load’ for example. My script listens for this event and does its binding routine again…

Hi,

TablePress itself doesn’t, as the pagination feature is actually coming from the external/third-party DataTables JS library from https://www.datatables.net/
I’m not that familiar with its internals, but from what I can see from its documentation there are multiple events that it uses/offers.

Regards,
Tobias

OK, I see. Or actually I don’t see ?? as it is getting too complicated… A quick scan of https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js doesn not reveal any clear events to me upon which FancyBox could be hooked. ??

Hi,

from what I can see, the page event could be it:
https://datatables.net/reference/event/page

Regards,
Tobias

Interesting… then in theory something like:

jQuery('#example').on( 'page.dt', easy_fancybox_handler );
} );

(where #example needs to correspond with the div ID that holds the table, no idea what that would be in this case) should do the trick. But I fear that in the description is written:

Note that the page.dt will be fired before the table has been redrawn with the updated data.

While I think we need to have an event after the fact. Maybe the https://datatables.net/reference/event/draw event is better?

@jherr can you share a link so I can adapt the code to fit and test your case?

Hi,

yes, draw is probably a better event. And instead of the ID selector, you could simply use the .tablepress class.

Regards,
Tobias

Thank you both for trying to figure this out. Unfortunately the site is a password protected hospital site and I cannot share the login info. I think both of these plugins are great and we will just have to live with this minor problem.

Ok, so if I would have to make a wild guess, this code snippet in a text widget or inside the themes footer.php (before the closing </body> tag) should do the trick:

<script type="text/javascript">
jQuery('.tablepress').on( 'draw.dt', easy_fancybox_handler );
} );
</script>

Hi,

yes, putting this into the footer.php (or maybe even below the table Shortcode on the page) should work here.
It might be good to check if easy_fancybox_handler is not undefined. Or is it always loaded in the header, RavanH?

Regards,
Tobias

I can’t thank you enough for the great support. I tried this code in the footer but there is still something missing. I tried both the class and the ID but that did not make a difference.

@tobias – yes the easy_fancybox_handler is set up in the header.

@jherr – let us know how it turns out. If it does not work, you could check the browsers script console for error messages and share them here ??