如何在Django-Tables2中使用AJAX实现无刷新分页功能？

其实django-tables2完全可以实现AJAX无刷新分页，官方虽然没内置这个功能，但自己动手改改就行，给你几个靠谱的方向参考：

1. 自定义视图，仅返回表格HTML片段 #

默认的django-tables2视图会返回完整页面，我们可以重写视图的get方法，判断当前请求是否是AJAX请求，若是则只渲染表格的核心模板片段，而非完整页面。

比如写一个继承自SingleTableView的视图：

from django_tables2 import SingleTableView
from django.http import HttpResponse
from django.template.loader import render_to_string

class AJAXTableView(SingleTableView):
    table_class = YourTableClass
    queryset = YourModel.objects.all()
    template_name = "your_app/full_page.html"  # 正常请求的完整页面模板

    def get(self, request, *args, **kwargs):
        self.object_list = self.get_queryset()
        context = self.get_context_data()
        
        # 检查是否为AJAX请求（Django 3.1+推荐直接判断请求头）
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 仅渲染表格的核心模板（django-tables2自带的table.html）
            table_html = render_to_string(
                "django_tables2/table.html", 
                context, 
                request=request
            )
            return HttpResponse(table_html)
        
        # 非AJAX请求返回完整页面
        return super().get(request, *args, **kwargs)

2. 前端拦截分页/排序事件，替换DOM #

接下来需要在前端写JS代码，拦截分页链接和排序链接的点击事件，阻止默认的页面跳转，改用AJAX请求获取表格片段，再替换页面上的表格容器。

比如用jQuery实现（原生JS也可以，思路一致）：

// 监听分页链接点击
$(document).on('click', '#table-container .pagination a', function(e) {
    e.preventDefault();  // 阻止默认跳转
    const url = $(this).attr('href');
    // 加载目标URL的内容，替换表格容器
    $('#table-container').load(url);
});

// 监听排序链接点击（和分页逻辑一致）
$(document).on('click', '#table-container th a', function(e) {
    e.preventDefault();
    const url = $(this).attr('href');
    $('#table-container').load(url);
});

对应的模板里，要把表格放在一个固定ID的容器中：

<div id="table-container">
    {% render_table table %}
</div>

3. 进阶优化：添加加载状态 #

为了提升用户体验，可以在AJAX请求过程中添加加载动画，比如：

$(document).on('click', '#table-container .pagination a, #table-container th a', function(e) {
    e.preventDefault();
    const url = $(this).attr('href');
    const container = $('#table-container');
    
    // 添加加载提示
    container.html('<div class="loading">加载中...</div>');
    
    // 发送请求并替换内容
    $.get(url, function(data) {
        container.html(data);
    });
});

注意事项 #

• Django 3.1及以上版本不再推荐使用request.is_ajax()，建议直接检查X-Requested-With请求头
• 分页和排序都是GET请求，无需处理CSRF令牌；如果涉及POST操作才需要额外处理
• 如果你的表格有自定义模板，记得在渲染片段时使用对应的自定义模板，而不是默认的django_tables2/table.html

之前社区里讨论的"Support AJAX sorting/pagination"主要是说官方没有内置这个功能，但通过自定义视图+前端JS的方式，完全可以实现无刷新分页和排序，这也是目前最常用的解决方案。

内容的提问来源于stack exchange，提问作者IordanouGiannis