Click to Load

Name	Email	ID
Agent Smith	void10@null.org	4ed4522e-c108-4984-9515-121d0bd2e27f
Agent Smith	void11@null.org	7a7f5b59-cf87-48a8-b8d0-f33f700bc193
Agent Smith	void12@null.org	525e4a80-104d-459f-a7d4-0edd004cac6b
Agent Smith	void13@null.org	a16f6eba-981a-4f87-8be2-5864d06bb5e3
Agent Smith	void14@null.org	c9363b38-a43c-4c83-9a3a-577035a17eb6
Agent Smith	void15@null.org	71b626c1-c1a1-4cf2-913d-7780711c9ef9
Agent Smith	void16@null.org	7207f63c-0168-48b0-b5ff-2f936b6a6b94
Agent Smith	void17@null.org	0392ddd5-a386-4f8e-830b-c785c895325d
Agent Smith	void18@null.org	93963c92-bc8a-42a8-8b5c-4f17a158f7d0
Agent Smith	void19@null.org	2e42d119-e74c-42a2-a440-9873dbc2a198

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.