django_tables2分页按钮未正常渲染Bootstrap样式问题

问题背景 #

Django开发初学者，暂未找到django_tables2表格无法正常渲染美观分页按钮的解决方案，以下为相关代码及问题现象：

相关代码 #

models.py #

class IDOC(models.Model):
    on_delete=models.SET_NULL, null=True)
    sample_id = models.CharField(max_length=200)
    lon = models.FloatField(null=True, blank=True)
    lat = models.FloatField(null=True, blank=True)
    dp_position = models.IntegerField(null=True, blank=True, verbose_name='DP Position [-]')

    def __str__(self):
        return self.sample_id

tables.py #

class IDOCTable(tables.Table):
    sediment_depth_m = NumberColumn()
    wl_m = NumberColumn()
    H_m = NumberColumn()
    idoc_mgl = NumberColumn()
    temp_c = NumberColumn()
    idoc_sat = NumberColumn()

    class Meta:
        model = IDOC
        template_name = "django_tables2/bootstrap-responsive.html"

views.py #

def view():
    idoc_objects = IDOC.objects.all()
    idoc_show = flutb.IDOCTable(idoc_objects)
    context = {
               'idoc_table': idoc_show,
               }
    return render(request, 'flussdata/query.html', context)

flussdata/query.html #

{% extends 'base.html' %}
{% load django_tables2 %}

{% block content %}
<div class="row">
    <div class="col-md">
        <div class="row">
            <div class="card card-body">
                <h3>Intragravel Dissolved Oxygen Content</h3>
                {% render_table idoc_table %}
            </div>
        </div>     
    </div>   
</div>

现象对比 #

• 实际渲染效果：
  
• 预期正常分页样式效果：
  

排查与解决方案 #

分页无样式核心原因是Bootstrap静态资源未正确加载，或是django_tables2内置模板与项目使用的Bootstrap版本不匹配，按以下步骤修复：

1. 确认基础模板静态资源引入
   项目继承的base.html必须在页面头部引入对应版本的Bootstrap CSS资源，否则django_tables2输出的分页HTML没有匹配的样式规则，就会显示为无格式纯文本链接。
2. 核对模板与Bootstrap版本对应关系
   不同Bootstrap版本适配的django_tables2内置模板路径不同，当前配置的bootstrap-responsive.html仅适配Bootstrap 3/4版本：
   • 如果项目使用Bootstrap 5，需要把tables.py中Meta类的template_name修改为django_tables2/bootstrap5-responsive.html
   • 可以在settings.py中添加全局配置，避免每个Table类重复写模板路径：

   # 根据实际使用的Bootstrap版本替换对应模板路径即可
   DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap5-responsive.html"
   

   配置前先确认django_tables2已经添加到INSTALLED_APPS列表中。
3. 验证分页触发条件
   django_tables2默认每页展示25条数据，若当前表内数据总数不足25条，分页栏会自动隐藏。可以在视图中手动指定每页条数测试：

   # 修改views.py中Table实例化代码
   idoc_show = flutb.IDOCTable(idoc_objects, per_page=10)
   

   刷新页面后，只要数据量超过10条就会显示分页栏，Bootstrap资源加载正常的话样式就会和预期一致。
4. 附带修正两处代码语法问题
   • models.py第一行on_delete=models.SET_NULL, null=True)为残缺代码，属于外键字段漏写了字段定义，补全后模型才能正常迁移运行
   • views.py的视图函数缺少必填的request入参，定义需要改为def view(request):，否则访问对应路由会直接报错。

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