Question

In Django it is quite straight forward to implement a pagination to display the query items on several pages. It is also quite straight forward to utilize Ajax to update only the bits of the page that really have changed, rather than loading the entire page every single time. However I found it a bit problematic when the two are combined.

In the example below the search results shall be shown in the appropriate result_list.html.

<form id="search-form" method="get" action=".">
        {{ form.as_p }}
        <input type="submit" value="search" />
</form>
<div id="search-results">           
       {% include "result_list.html" %}
</div>

result_list.html:

{% if sales_items %}
    {% for item in sales_items %}
            <li>
                <ul>                
                    Search Result...        
                </ul>                               
            </li>       
        {% endfor %}
        {% if show_paginator %}
                <div class="paginator">
                          ...
                  (Page {{ page }} of {{ pages }})
                </div>
        {% endif %}  
{% else %}
    {% trans 'No Items found.' %}
{% endif %}

This solution works very nicely. Because everytime I search (through ajax) for something the result_list.html including the pagination are refreshed.

Problem:

But now if I had a table instead I couldn’t use this approach anymore.

<table class="table">
   <thead>
        <tr>
           <th>...</th>
        </tr>
   </thead>
   <tbody id="search_result">
        {% include 'calls_list.html' %}
   </tbody>
</table>

The page bit that is required to be refreshed is just between the <tbody> tag. Hence Calls_List.html returns only <tr> and <td> tags that is understood by a <tbody>. I simply couldn’t paste the paginator code in there as well (unlike the above example):

    {% if show_paginator %}

      <div class="paginator">
         ...
          (Page {{ page }} of {{ pages }})
      </div>
    {% endif %}  

… since the table’s tbody isn’t expecting to find a div element there.

Unless I do a second round trip to the server to pull the pagination code separately. I couldn’t find a clean solution for this.

Have you been in the same situation, How did you solve this please?

Many Thanks,

Answer 1

• One solution would be that you put the pagination part in a <tr> but change the visualization as you would like (e.g. only 1 <td> or spanning multiple columns etc.)

• Another solution would be you change your Calls_list.html to return complete <table> tag and put pagination part out of table in a separate <div>.

• Third option could be return JSON of rows data along with pagination data. Then just update the existing table rows and pagination html.