Click To Load

Demonstrates clicking to load more rows in a table

Back | Explain | Code | Htmx Docs
This example shows how to implement click-to-load the next page in a table of data. The crux of the demo is the final row: ``` def make_last_row(page): return Tr(hx_target="this")( Td(colspan="3")( Button("Load More Agents...", hx_get=load_contacts.rt(page=page + 1), hx_swap="outerHTML", cls="btn primary"), ), ) @app.get("/contacts") def load_contacts(page: int, limit: int = 5): rows = [Tr(Td("Smith"), Td((page - 1) * limit + i)) for i in range(limit)] return *rows, make_last_row(page) ``` This row contains a button that will replace the entire row with the next page of results (which will contain a button to load the next page of results). And so on.

Direct url