Infinite Scroll
Another approach for handling cases with a large number of data items to display is infinite scroll. Initially, a small number of items are fetched from the server. When the user scrolls down to bring the last one into view, a request to get more items is automatically sent to the server. This repeats as the user scrolls down the page, giving the illusion that all the items were loaded at once.
Let’s reimplement the app described in the “Pagination” section using infinite scroll. The new HTML follows. Note the use of hx-swap="beforeend" on line 9 to state that the table rows returned by the server should be placed before the end of the table rather than replacing the entire table.
| 1: | <html> |
| - | <head> ... |
Get Server-Driven Web Apps with htmx now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
