Django 5.1.4
Python 3.12.4

I’m using HTMX to load partial pages for a table in my Django project, but I’m facing problems with pagination. The paging may not advance properly (it shows 2 pages, e.g. <Page 1 of 2>), may stream rows endlessly, or the paging UI might not appear at all. I’ve tried several fixes without success.

My setup is as follows:

1. The base page (base_console_ap.html) loads on page load and uses an hx-get to call a view (console_view).
2. The console_view returns the task_index.html partial page. This partial, in turn, includes another partial (task_list.html) that loads table elements with an hx-get to the task_index view for further data, rendering task_row.html.

The following code snippets outline the components of my setup:

HTMLCopied
<div class="container-fluid rounded border" style="max-width:1100px; height:510px">
    <div class="row">
        <div class="col">
            <div id="task_indx"
                 hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                 hx-trigger="load"
                 hx-get="{% url 'console_app:console_view' %}"
                 hx-target="this"> 
            </div>
        </div>
    </div>
</div>

PYTHONCopied
def console_view(request):
    if request.htmx:
        template = 'console_app/task_index.html'
        return render(request, template, {})
    else:
        data = []
        fls_msg_cnt = ManagerMessages.objects.filter().count()
        nodes_cnt = Nodes.objects.filter().count()
        ToLog_cnt = ToLog.objects.filter().count()
        data = {
            'labels': ['Messages', 'Ivanti', 'SolarWinds', 'Control-M', 'TurnOver Log'],
            'values': [fls_msg_cnt, nodes_cnt, 28, 21, ToLog_cnt]
        }
        template = 'console_app/base_console_ap.html'
        return render(request, template, {'chart_data': data})

PYTHONCopied
def task_index(request):
    if request.htmx:
        print('htmx - task_index')
        tasks = Task.objects.all().order_by(_TASK_ORDBY)
        paginator = Paginator(tasks, 4)
        page_number = request.GET.get('page')
        try:
            page_obj = paginator.page(page_number)
        except PageNotAnInteger:
            page_obj = paginator.page(1)
        except EmptyPage:
            page_obj = paginator.page(paginator.num_pages)
        template = 'console_app/task_row.html'
        return render(request, template, {'page_obj': page_obj, 'count': tasks.count()})

HTMLCopied
<div id="taskList">
    {% include 'console_app/task_list.html' %}
</div>

HTMLCopied
<tbody id="taskrows" hx-trigger="load" hx-get="{% url 'console_app:task_index' %}" hx-target="this">
    <tr>
        <td class="spinner-border" role="status">
            <span class="visually-hidden">Loading please wait...</span>
        </td>
    </tr>
</tbody>

HTMLCopied
{% for task in page_obj %}

<tr>
  {% if task.completed %}
    <td style="word-wrap: break-word;min-width: 160px;max-width: 260px;"><s>{{ task.task }}</s></td>
  {% else %}
    <td style="word-wrap: break-word;min-width: 160px;max-width: 260px;">{{ task.task }}</td>
  {% endif %}
  <td>{{ task.created_on }}</td>
  <td>{{ task.notes }}</td>
  <td>
  {% if task.completed %}
    <button type="button" class="btn-sm btn btn-outline-secondary" disabled>&checkmark;</button>
  {% else %}
    <button type="button" class="btn-sm btn btn-outline-success" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-get="{% url 'console_app:mark_task' task.pk %}" hx-target="#taskList" style="cursor: pointer;">✔</button>
  {% endif %}
    <button type="button"
     class="btn-sm btn btn-outline-danger"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-get="{% url 'console_app:delete_task' task.pk %}"
     hx-target="#taskList"
     hx-confirm="Are you sure you wish to delete?"
     style="cursor: pointer;">DEL</button>
    <button type="button"
     class="btn-sm btn btn-outline-warning"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-get="{% url 'console_app:edit_task' task.pk %}"
     hx-target="closest tr"
     hx-swap="outerHTML"
     style="cursor: pointer;">Edit</button>
  </td>
</tr>
{% endfor %}

<div class="btn-group" role="group" aria-label="Item pagination">
  {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-outline-primary">&laquo;</a>
  {% endif %}
  {% for page_number in page_obj.paginator.page_range %}
      {% if page_obj.number == page_number %}
          <button class="btn-sm btn btn btn-primary active">
              <span>{{ page_number }} <span class="sr-only">(current)</span></span>
          </button>
      {% else %}
          <a href="?page={{ page_number }}" class="btn btn-outline-primary">{{ page_number }}</a>
      {% endif %}
  {% endfor %}
  {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}" class="btn btn-outline-primary">&raquo;</a>
  {% endif %}
</div>
<div>Total record count: {{ count }}</div>

I also included an image reference which shows the pagination UI, but the behavior remains inconsistent. Any advice or insights into what might be causing these HTMX pagination issues would be greatly appreciated.