Click to Load

Name	Email	ID
Agent Smith	void10@null.org	58db09bd-505d-47be-8ee1-8f5c3bd2d007
Agent Smith	void11@null.org	874ada3f-cabe-415d-9d8f-a6e0ecb1e5a1
Agent Smith	void12@null.org	41b6f6ea-b563-4bfe-b529-cfb13d4b311b
Agent Smith	void13@null.org	4931fbe1-66ea-4667-b22e-2c8ca88f1e2c
Agent Smith	void14@null.org	4d267889-e42b-4dc1-9257-00ea617e5418
Agent Smith	void15@null.org	053efb70-c5ab-431b-bb2a-9526f5cfb6ac
Agent Smith	void16@null.org	84a44681-acc4-4cb7-9c0c-1e653c623f8c
Agent Smith	void17@null.org	84309a36-0cac-4508-b609-b717a74200a1
Agent Smith	void18@null.org	f97a1611-dbdf-4f1b-bb6f-79730fd3707b
Agent Smith	void19@null.org	884b783b-cf06-4e15-b277-45667d33f4a4

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.