Django分頁和Ajax查詢

在Django中，實現分頁以在多個頁面上顯示查詢項目是非常簡單的。使用Ajax僅更新實際發生更改的頁面位，而不是每次加載整個頁面也是非常直接的。但是，當我們將兩者結合在一起時，我發現它有點問題。Django分頁和Ajax查詢

在下面的示例中，搜索結果應顯示在相應的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 %}

這種解決方案非常漂亮。因爲每次我搜索（通過ajax）某些內容時，包括分頁的result_list.html都會刷新。

問題：

但現在如果我有一個表，而不是我不能再使用這種方法。

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

是需要刷新頁面位只是<tbody>標籤之間。因此Calls_List.html僅返回<tr>和<td>標籤，該標籤被<tbody>所理解。我簡直無法粘貼分頁程序代碼在那裏，以及（與上面的例子）：

{% if show_paginator %} 

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

...因爲表的TBODY不希望找到一個div元素存在。

除非我第二次往服務器上單獨提取分頁代碼。我無法找到一個乾淨的解決方案。

你是否處於同樣的情況，你是怎麼解決這個問題的？

非常感謝，

來源

2012-09-01 Houman

一個解決辦法是你把分頁部分在<tr>，但改變的可視化，你想（如只有1 <td>或跨越多個列等）
另一種解決方案是將您的Calls_list.html更改爲返回完整的<table>標記，並將分頁部分放在表格外的另一個<div>中。
第三個選項可以返回行數據的JSON以及分頁數據。然後只需更新現有的表格行和分頁html。

來源

2012-09-01 17:18:56 Rohan

感謝您分享此。關於1）我已經嘗試過，但分頁然後擠入該行。它只是不好看。但是你給了我一個想法，或許我可以用css來設計特定的tr。對於二，返回完整的表格就像幾乎渲染整個頁面，是不是使ajax方法不必要？ – Houman

@Kave，對於除行數據以外的＃2數據，表頭將相對於您的原始方法爲額外的。請參閱我使用JSON響應更新的答案。 – Rohan

是的你是對的，它的表頭被額外加載。我認爲它比加載整個頁面還要便宜。也許這是最容易實現的解決方案。事實上，您的第三個解決方案是最佳解決方案爲數據創建一個JSOn，爲分頁器創建另一個JSOn，並將它們合併爲一個Json並通過網絡發送。然後，jquery會根據需要剪切片段。 :)它只需要更長的時間來實現。所有的好方案。謝謝 – Houman

Django分頁和Ajax查詢

回答

相關問題