Question

我正在使用django-tables2而我正在尝试显示下一页的数据而不加载其他页面。我认为可以使用AJAX。

从我发现的情况来看，似乎可能无法实现。对此Support AJAX sorting/pagination

进行了一些讨论

我有什么想看的吗？

Answer 1

然而，由于django-tables2（以及一般的django）更多地适应服务器端渲染世界，因此它可能不那么容易。我将在这里草拟一个解决方案并考虑我的博客（https://spapas.github.io）的有趣主题：

您需要覆盖将要使用的django-tables2模板。您不能使用默认链接，因为它的分页是由普通链接完成的。您应该覆盖它以使用Ajax调用 - 请查看此问题以获取更多Is it possible to custom django-tables2 template for a specific page in this case?。您需要做的是禁用页面链接的默认链接功能，并通过ajax调用它们。根据您的操作方式，可以通过视图模板中的script完成此操作，而无需覆盖表格模板。
< / LI>
您需要修改视图以检测它是否被ajax调用（即通过上面定义的这些分页按钮），并且每次都返回不同的模板。如果它被正常调用，那么您只需渲染经典模板即可。如果通过ajax调用它，那么它将仅返回仅包含表的html部分。
现在，在您的普通模板中，您将表格放在div名为（fe）#the_table的内容中 - 当用户点击您要执行的分页链接时ajax调用和响应将只包含表格 - 然后您将#the_table div的内容替换为刚刚收到的内容。

因此，您的视图应该有两个模板，view.html类似于：

{% extends base.html %}
{% block content %}
blah blah

<div id='the_table'>
    {% include 'partial_table.html' %}
</div>
{% endblock %}

{% block extra_script %}
    <script>
    // You can do something like (NOT TESTED):
    // I don't remember if the pagination links belong to a class 
    // if not you may want to add that class yourself
    $('pagination-link').click(function(e) {
        // Don't follow the link
        e.preventDefault();
        // Do the ajax request
        $.get($(this).attr("href"), function(data) {
            // Replace the table with what you received
            $('#the_table').html(data)
        });

    });
    </script>
{% endblock %}

您的partial_table.html：

{% load django_tables2 %}
{% render_table table %}

现在在您看来，如果您正在使用CBV，那么您必须使用上面定义的template_name = view.html并覆盖get_template_names，如下所示：

def get_template_names(self):
    # Sometimes the is_ajax() is not working properly so if it doesn't 
    # just pass the ajax_partial query parameter to your ajax request
    if self.request.is_ajax() or self.request.GET.get('ajax_partial'):
        return 'partial_table.html'
    return super().get_template_names()

在我的Django CBV指南中可以找到更多信息：https://spapas.github.io/2018/03/19/comprehensive-django-cbv-guide/#implement-a-partial-ajax-view

如何在Django-Tables2中使用AJAX进行分页？

1 个答案: