Click to Load

Name Email ID
Agent Smith void10@null.org 0237b320-2e89-4fd3-b210-5aca5556330a
Agent Smith void11@null.org dc231b99-76a9-4919-ad74-c6843a05b9c9
Agent Smith void12@null.org b4e386aa-ee6b-40e7-b2da-21a8e25c7191
Agent Smith void13@null.org 0411fb9f-2172-4d07-b5ae-80b3db4cf61a
Agent Smith void14@null.org 0a2bd858-d0a2-407f-a1b9-b4de28cb38d9
Agent Smith void15@null.org 2bc1a390-82f3-4cc4-ae06-13ae6504d2fb
Agent Smith void16@null.org 18468c69-5723-4b86-8ab7-a1ea4b20462d
Agent Smith void17@null.org b98652ed-5e12-43cb-b406-1f1724344b28
Agent Smith void18@null.org 9e308921-7b74-4639-a7ce-855a33b9caf6
Agent Smith void19@null.org 206ebd6b-754d-42a0-8ee3-735e6cb039d5

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.