Click to Load

Name	Email	ID
Agent Smith	void10@null.org	7914b2f7-c052-49b0-a3e3-e04cbc6891c4
Agent Smith	void11@null.org	333827d2-4a33-463b-a979-ab6e8867dfb3
Agent Smith	void12@null.org	2deb3781-7656-4d7d-b400-9db971fb7790
Agent Smith	void13@null.org	bb3eda38-b344-40bc-a2f8-5480a5b20d26
Agent Smith	void14@null.org	af534c0a-5d16-4b13-a19b-5c31c8f5ef6c
Agent Smith	void15@null.org	d8be3429-4f41-4ac3-b190-6dad3d7120dc
Agent Smith	void16@null.org	a208896e-174c-4a09-8181-d9514df33be0
Agent Smith	void17@null.org	83ee1e16-8ad5-4541-8cc0-08ecd734e98c
Agent Smith	void18@null.org	8139d76b-80bf-489a-b6e5-83a525db7ef6
Agent Smith	void19@null.org	a8bbbdcf-bbc5-4adf-81a8-424dc5a0fd29

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.