I have successfully paginated when returning all the objects but however, when I query the return for the searched result, it initially gets the correct pagination number of page. But clicking on any of the paginated searched result will immediately return the pagination of all the objects.

My HTML pagination

<ul class="pagination center" id="pagination" hx-swap-oob="true">
  {% if data.has_previous %}
  <li class="waves-effect">
    <a href="?page={{ data.previous_page_number }}"><i class="material-icons"><</i></a>
  </li>
  {% endif %} {% for page in data.paginator.page_range %} {% if page == data.number %}
  <li class="active purple lighten-2"><a href="?page={{ page }}">{{page}}</a></li>
  {% else %}
  <li class="waves-effect"><a href="?page={{ page }}">{{page}}</a></li>
  {% endif %} {% endfor %} {% if data.has_next %}
  <li class="waves-effect">
    <a href="?page={{data.next_page_number}}"><i class="material-icons">></i></a>
  </li>
  {% endif %}
</ul>