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查询

回答

相关问题