title: Django AJAX load-more-pagination with grouping
body: <p>I have a page the displays messages grouped by date, and paginated via AJAX.<br>
  Consider the database contains 9 messages</p>
  
  <ul>
  <li>3 was sent 9 Feb </li>
  <li>3 was sent 8 Feb</li>
  <li>3 was sent 7 Feb</li>
  </ul>
  
  <p>and the Queryset is limited by 5 messages only.</p>
  
  <p>View Code look like this </p>
  
  <pre><code>page = Paginator(queryset, int(request.GET['limit'])).page(request.GET['page'])
  return paginator.page(request.GET['page']).object_list
  </code></pre>
  
  <p>HTML looks like this</p>
  
  <pre><code>&lt;div class='messages-container'&gt;
      {% include 'messages-snippet.html' %}
  &lt;/div&gt;
  &lt;a href='?page=2&amp;limit=5'&gt;Load older&lt;/a&gt;
  </code></pre>
  
  <p>And the message-snippet's HTML looks like this</p>
  
  <pre><code>&lt;div class='day-messages'&gt;
      &lt;span&gt;9 Feb 2012&lt;/span&gt;
      &lt;p class='message'&gt;Message 1&lt;/p&gt;
      &lt;p class='message'&gt;Message 2&lt;/p&gt;
      &lt;p class='message'&gt;Message 3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class='day-messages'&gt;
      &lt;span&gt;8 Feb 2012&lt;/span&gt;
      &lt;p class='message'&gt;Message 4&lt;/p&gt;
      &lt;p class='message'&gt;Message 5&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when the Client click "load older", the browser will send the request to the same view, which will render this time on the message-snippet template, resulting in a HTML code like this</p>
  
  <pre><code>&lt;div class='day-messages'&gt;
      &lt;span&gt;8 Feb 2012&lt;/span&gt;
      &lt;p class='message'&gt;Message 6&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class='day-messages'&gt;
      &lt;span&gt;7 Feb 2012&lt;/span&gt;
      &lt;p class='message'&gt;Message 7&lt;/p&gt;
      &lt;p class='message'&gt;Message 8&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I inject this html in the parent div, the result will be like this</p>
  
  <pre><code>&lt;div class='messages-container'&gt;
      &lt;div class='day-messages'&gt;
          &lt;span&gt;9 Feb 2012&lt;/span&gt;
          &lt;p class='message'&gt;Message 1&lt;/p&gt;
          &lt;p class='message'&gt;Message 2&lt;/p&gt;
          &lt;p class='message'&gt;Message 3&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='day-messages'&gt;
          &lt;span&gt;8 Feb 2012&lt;/span&gt;
          &lt;p class='message'&gt;Message 4&lt;/p&gt;
          &lt;p class='message'&gt;Message 5&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='day-messages'&gt;
          &lt;span&gt;8 Feb 2012&lt;/span&gt;
          &lt;p class='message'&gt;Message 6&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='day-messages'&gt;
          &lt;span&gt;7 Feb 2012&lt;/span&gt;
          &lt;p class='message'&gt;Message 7&lt;/p&gt;
          &lt;p class='message'&gt;Message 8&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;a href='?page=2&amp;limit=5'&gt;Load older&lt;/a&gt;
  </code></pre>
  
  <p>Now I have two groups for the same day (8 Feb 2012)<br>
  Currently I do a hackish solution to fix this. I detect if there is a repeated group, then merge them. Though, I don't like this solution. and I am wondering if someone thought of a better solution.  </p>
  
  <p>Note: I've seen <a href="http://code.google.com/p/django-endless-pagination/" rel="nofollow">Django Endless Pagination</a>, it seems to handle the ajax part for me, but It doesn't solve the Grouping problem.<br>
  Also I thought of jQuery templates, but Still I have to hack to detect if the day-group is repeated or not. </p>
  
  <p>Any help will be appreciated, Thanks in advance.</p>