AJAX分页 - 使下一个和上一个链接工作的小问题(使用jQuery和Django)

时间:2011-05-12 20:03:46

标签: django jquery

我在页面上有一个搜索框,需要在不刷新整个页面的情况下更新结果。我正在使用Django视图来提供结果,并使用jQuery来获取和加载页面上的结果。我的问题是similar to this Stack O. question,但我无法弄清楚如何正确生成Next和Previous链接。

这是Django搜索视图:

def search_page(request):
# Perform the search and return a QuerySet
form = SearchForm()
contentq = []
show_results = False
if 'query' in request.GET:
    show_results = True
    query = request.GET['query'].strip()
    if query:
        form = SearchForm({'query' : query})
        contentq = ContentQueue.objects.filter(
            description__icontains=query
        )
query = query.replace(' ', '+')

# This next section sets up Paginator
ITEMS_PER_PAGE = 6
paginator = Paginator(contentq, ITEMS_PER_PAGE)
try:
    page_number = int(request.GET['page'])
except (KeyError, ValueError):
    page_number = 1
try:
    page = paginator.page(page_number)
except InvalidPage:
    raise Http404
contentq = page.object_list

variables = RequestContext(request, {
    'form': form,
    'contentq': contentq,
    'show_results': show_results,
    'query': query,
    'show_paginator': paginator.num_pages > 1,
    'has_prev': page.has_previous(),
    'has_next': page.has_next(),
    'page': page_number,
    'pages': paginator.num_pages,
    'next_page': page_number + 1,
    'prev_page': page_number -1
})
if request.GET.has_key('ajax'):
    return render_to_response('contentq.html', variables)
else:
    return render_to_response('create_collection_ui.html', variables)

以下是调用Django搜索视图的jQuery脚本:

    function search_submit() {
    var query = $("#id_query").val();
    $("#search-results").load("/search/?ajax&query=" + encodeURIComponent(query));
    return false;
        }

    $(document).ready(function () {
     $("#search-form").submit(search_submit);
    });

最后,这里是构成Next和Previous链接的HTML。

{% if show_paginator %}
{% if query %}
<div class="paginator">
    {% if has_prev %}
        <a href="?page={{ prev_page }}&query={{ query }}">&laquo; Previous</a>
    {% endif %}
    {% if has_next %}
        <a href="?page={{ next_page }}&query={{ query }}">Next &raquo;</a>
    {% endif %}
    (Page {{ page }} of {{ pages }})
</div>
{% else %}
<div class="paginator">
    {% if has_prev %}
        <a href="?page={{ prev_page }}">&laquo; Previous</a>
    {% endif %}
    {% if has_next %}
        <a href="?page={{ next_page }}">Next &raquo;</a>
    {% endif %}
    (Page {{ page }} of {{ pages }})
</div>
{% endif %}
{% endif %}

感觉如此接近,但又如此遥远!任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

花了更多时间来理解the solution I referenced in my question,并且能够解决这个问题。除了更改标签之外,我几乎按原样使用了解决方案代码。