remote-pagination

back edit

Loads paginated results into the same container. There are in total 3 pages.

<remote-pagination>
  <ul class="Box mb-3 overflow-auto" style="max-height: 300px" data-target="remote-pagination.list">
    <li class="Box-row" data-pagination-src="?page=2"><a href="#1" data-targets="remote-pagination.focusMarkers">User 1</a></li>
    <li class="Box-row"><a href="#2">User 2</a></li>
    <li class="Box-row"><a href="#3">User 3</a></li>
  </ul>
  <form data-target="remote-pagination.form" hidden data-action="submit:remote-pagination#submit">
    <button class="btn btn-block" data-target="remote-pagination.submitButton">Load more</button>
  </form>
</remote-pagination>