django.core.paginator 使用 jQuery 进行 Ajax 分页 [英] django.core.paginator Ajax pagination with jQuery
本文介绍了django.core.paginator 使用 jQuery 进行 Ajax 分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题
我需要在 Django 模板中使用 jQuery 进行 Ajax 分页.
情况
我的模板中有以下代码:
[代码省略]<表格><头>[代码省略]</thead><tbody id="vms">{% for vm in vms.object_list %}[代码省略]{% 结束为 %}</tbody>[代码省略]{% 如果 vms.has_next %}<!--<a href="?page={{ vms.next_page_number }}" id="next-page">Next</a>--><a href="#" id="下一页">下一页</a>{％ 万一 ％}</span>和我的观点:
def list_(request):vms = VirtualMachine.objects.all()分页器 = 分页器(vms，10)页 = 1如果 request.is_ajax():query = request.GET.get('page')如果查询不是无:页面 = 查询尝试:vms = paginator.page(page)除了(EmptyPage，InvalidPage):vms = paginator.page(paginator.num_pages)return render_to_response('virtual_machine/list.html', {'vms': vms,},context_instance=RequestContext(请求)，)结论
因此，每当我按下一步"时，它实际上都会执行 Ajax 请求，但数据并未在表中呈现.
使用 django.core.paginator 进行分页，如果可能的话，我真的很想坚持使用它.
你能看出代码有什么遗漏/错误吗?
解决方案
我没有发现错误，但我在下面展示了我是如何解决这个任务的.我认为你可以很容易地适应你的需求.
jquery ajax部分:
模板html部分:
<span class="step-links">{% if object_list.has_previous %}<a id="prev" href="?{{ urlquerystring_previous_page }}">previous</a>{％ 别的 ％}<span style="visibility:hidden;">上一个</span>{％ 万一 ％}<span class="current">第 {{ object_list.number }} 页，共 {{ object_list.paginator.num_pages }}.</span>{% if object_list.has_next %}<a id="next" href="?{{ urlquerystring_next_page }}">next</a>{％ 别的 ％}<span style="visibility:hidden;">next</span>{％ 万一 ％}</span><form class="" id="action-selecter" action="{{ request.path }}" method="POST"><div id="ajax_table_result">
<头>{% table_header 标题 %}</thead>....Problem
I need Ajax pagination using jQuery in a Django template.
Situation
I have the following code in my template:
<script type="text/javascript">
$(document).ready(function() {
$("#next-page").click(function() {
var page = {{ vms.next_page_number }};
$("#vms").html(' ').load (
'{% url virtualmachine-list %}?page=' + q );
});
});
</script>
[code omitted]
<table>
<thead>
[code omitted]
</thead>
<tbody id="vms">
{% for vm in vms.object_list %}
[code omitted]
{% endfor %}
</tbody>
</table>
[code omitted]
{% if vms.has_next %}
<!--<a href="?page={{ vms.next_page_number }}" id="next-page">Next</a>-->
<a href="#" id="next-page">Next</a>
{% endif %}
</span>
and my view:
def list_(request):
vms = VirtualMachine.objects.all()
paginator = Paginator(vms, 10)
page = 1
if request.is_ajax():
query = request.GET.get('page')
if query is not None:
page = query
try:
vms = paginator.page(page)
except (EmptyPage, InvalidPage):
vms = paginator.page(paginator.num_pages)
return render_to_response('virtual_machine/list.html', {
'vms': vms,
},
context_instance=RequestContext(request),
)
Conclusion
So, whenever I press "Next", it actually does an Ajax request, but the data doesn't get rendered in the table.
For pagination django.core.paginator is used, and I would really like to stick with it, when possible.
Can you see what is missing/wrong with the code?
解决方案 I did not find the error, but I show you below how I solved this task. I think you can adapt it easily to your needs.
The jquery ajax part:
<script type="text/javascript">
function ajax_get_update()
{
$.get(url, function(results){
//get the parts of the result you want to update. Just select the needed parts of the response
var table = $("table", results);
var span = $("span.step-links", results);
//update the ajax_table_result with the return value
$('#ajax_table_result').html(table);
$('.step-links').html(span);
}, "html");
}
//bind the corresponding links in your document to the ajax get function
$( document ).ready( function() {
$( '.step-links #prev' ).click( function(e) {
e.preventDefault();
url = ($( '.step-links #prev' )[0].href);
ajax_get_update();
});
$( '.step-links #next' ).click( function(e) {
e.preventDefault();
url = ($( '.step-links #next' )[0].href);
ajax_get_update();
});
});
//since the links are reloaded we have to bind the links again
//to the actions
$( document ).ajaxStop( function() {
$( '.step-links #prev' ).click( function(e) {
e.preventDefault();
url = ($( '.step-links #prev' )[0].href);
ajax_get_update();
});
$( '.step-links #next' ).click( function(e) {
e.preventDefault();
url = ($( '.step-links #next' )[0].href);
ajax_get_update();
});
});
</script>
The template html part:
<div class="pagination">
<span class="step-links">
{% if object_list.has_previous %}
<a id="prev" href="?{{ urlquerystring_previous_page }}">previous</a>
{% else %}
<span style="visibility:hidden;">previous</span>
{% endif %}
<span class="current">
Page {{ object_list.number }} of {{ object_list.paginator.num_pages }}.
</span>
{% if object_list.has_next %}
<a id="next" href="?{{ urlquerystring_next_page }}">next</a>
{% else %}
<span style="visibility:hidden;">next</span>
{% endif %}
</span>
</div>
<form class="" id="action-selecter" action="{{ request.path }}" method="POST">
<div id="ajax_table_result">
<table class="w600" cellspacing="5">
<thead>
{% table_header headers %}
</thead>
<tbody>
....
这篇关于django.core.paginator 使用 jQuery 进行 Ajax 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆