Click to Load

Name	Email	ID
Agent Smith	void10@null.org	0237b320-2e89-4fd3-b210-5aca5556330a
Agent Smith	void11@null.org	dc231b99-76a9-4919-ad74-c6843a05b9c9
Agent Smith	void12@null.org	b4e386aa-ee6b-40e7-b2da-21a8e25c7191
Agent Smith	void13@null.org	0411fb9f-2172-4d07-b5ae-80b3db4cf61a
Agent Smith	void14@null.org	0a2bd858-d0a2-407f-a1b9-b4de28cb38d9
Agent Smith	void15@null.org	2bc1a390-82f3-4cc4-ae06-13ae6504d2fb
Agent Smith	void16@null.org	18468c69-5723-4b86-8ab7-a1ea4b20462d
Agent Smith	void17@null.org	b98652ed-5e12-43cb-b406-1f1724344b28
Agent Smith	void18@null.org	9e308921-7b74-4639-a7ce-855a33b9caf6
Agent Smith	void19@null.org	206ebd6b-754d-42a0-8ee3-735e6cb039d5

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:

<tr id="replaceMe">
  <td colspan="3">
    <button class='btn primary' hx-get="rows.jsp?page=2"
                        hx-target="#replaceMe"
                        hx-swap="outerHTML">
         Load More Agents... <img class="htmx-indicator" src="images/bars.svg">
    </button>
  </td>
</tr>

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.