Click to Load

Name	Email	ID
Agent Smith	void10@null.org	dd830960-f30e-42f3-bb64-bb15e9f31b76
Agent Smith	void11@null.org	fc01c5a5-4546-4b5d-9b0a-cec886f4ea1f
Agent Smith	void12@null.org	640df854-280f-4cd0-bb90-2c8730f064e9
Agent Smith	void13@null.org	cbc4f852-46eb-4468-837d-bb9cc06a3513
Agent Smith	void14@null.org	6462a689-5697-48d9-acbf-ef6d38dbc7f0
Agent Smith	void15@null.org	6e5dcde7-3a0a-420c-8662-928503dba2e2
Agent Smith	void16@null.org	c19bc8f5-b58a-43f8-acb9-fa25600c9ca9
Agent Smith	void17@null.org	b376c36e-4544-4060-b668-3766331f1e82
Agent Smith	void18@null.org	65c7e5a7-9340-429a-bb07-1a1c5f149dc8
Agent Smith	void19@null.org	415cba6b-7041-48fb-abdd-7e7c61cbd2e0

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.