Click To Load

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' hx-get="/contacts/?page=2" 
         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">

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.

Server Requests ↑ Show
                <tr><td>Agent Smith</td><td></td><td>AA23600EG65272C</td></tr>
<tr><td>Agent Smith</td><td></td><td>3CB6F8248154FG1</td></tr>
<tr><td>Agent Smith</td><td></td><td>879848A9A669B2D</td></tr>
<tr><td>Agent Smith</td><td></td><td>90B3808993A3481&...


Name Email ID
Agent Smith AA23600EG65272C
Agent Smith 3CB6F8248154FG1
Agent Smith 879848A9A669B2D
Agent Smith 90B3808993A3481
Agent Smith GF4363825BE565G
Agent Smith D2EGCFF05D2GDA1
Agent Smith GFCD3CBD841GCGA
Agent Smith 1B5C1182EDE19FC
Agent Smith EF0FD8B170B93C8
Agent Smith 47FDB28213GABB4