クリックしてロード

この例では、データのテーブルで次のページを「クリックしてロード」する方法を実装する方法を示します。デモの中心となるのは最後の行です。

<tr id="replaceMe">
  <td colspan="3">
    <button class='btn primary' hx-get="/contacts/?page=2"
                        hx-target="#replaceMe"
                        hx-swap="outerHTML">
         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
    </button>
  </td>
</tr>

この行には、行全体を次の結果ページ（そこには結果の次のページをロードするボタンが含まれます）に置き換えるボタンが含まれます。そうやって続けられます。

🔗デモ