Click to Load

Name	Email	ID
Agent Smith	void10@null.org	6563e10b-5930-4da7-9934-e574c0076408
Agent Smith	void11@null.org	145e90f7-2552-447e-a906-7ffe858ad0bd
Agent Smith	void12@null.org	82c6b975-6c27-4b94-931b-c38ee2405e7f
Agent Smith	void13@null.org	237f8e09-edde-4cda-8229-38ed4f625fc9
Agent Smith	void14@null.org	6ed4e1af-2b3a-421e-a44b-55846a14fbd7
Agent Smith	void15@null.org	20171f8b-109b-4742-8c49-9c02b6ff20c0
Agent Smith	void16@null.org	4d1a4158-a7fd-4e5e-84ac-c379a9a0721e
Agent Smith	void17@null.org	4ee84c05-6344-40e6-88f3-173ad6c53017
Agent Smith	void18@null.org	1c04f6cd-7fff-462c-ae7f-08e154686970
Agent Smith	void19@null.org	168d0009-17a6-4267-81cb-4529be5af20e

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.