Django项目中Bootstrap表格列筛选失效问题排查

一、确保正确引入依赖 #

删除本地路径的扩展引入，启用注释的CDN链接（按顺序引入，保证依赖加载完整）：

<link href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

二、修正表格结构与筛选配置 #

1. 删除手动编写的筛选控件（input/select），依赖扩展自动生成
2. 为所有需要筛选的列添加data-field和data-filter-control属性
3. 修复标签闭合、拼写及图标对应错误：

<table class="table table-sm" id="postTable" data-filter-control="true" data-show-search-clear-button="true">
    <thead>
        <tr>
            <th><h6 class="jy-text">  </h6></th>
            <th data-field="date_post"><h6 class="jy-text">Date</h6></th>
            <th data-field="title" data-filter-control="text"><h6 class="jy-text">Title</h6></th>
            <th data-field="position" data-filter-control="select"><h6 class="jy-text">Position</h6></th>
            <th data-field="employment" data-filter-control="select"><h6 class="jy-text">Type</h6></th>
            <th data-field="location" data-filter-control="text"><h6 class="jy-text">Location</h6></th>
            <th data-field="vessel_size" data-filter-control="text"><h6 class="jy-text">LOA</h6></th>
        </tr>
    </thead>
    <tbody>
        {% for post in post_list %}
            <tr>
                <td>
                    <button class="btn btn-default btn-xs" data-bs-toggle="collapse" data-bs-target="#hidden-row-{{ post.id }}">
                        <p class="jy-text">+</p>
                    </button>
                </td>
                <td><p class="jy-text">{{ post.date_post }}</p></td>
                <td><p class="jy-text">{{ post.title }}</p></td>
                <td><p class="jy-text">{{ post.position }}</p></td>
                <td><p class="jy-text">{{ post.employment }}</p></td>
                <td><p class="jy-text">{{ post.location }}</p></td>
                <td><p class="jy-text">{{ post.vessel_size }}</p></td>
            </tr>
            <tr id="hidden-row-{{ post.id }}" class="collapse">
                <td colspan="7" class="hiddenRow">
                    <p class="jy-text">Description: {{ post.description }}</p>
                    <p class="jy-text">Contact this job!</p>
                    <a href="mailto:{{ post.email }}"><i class="fa-solid fa-circle-envelope fa-2xs"></i></a> 
                    <a href="tel:{{ post.phone }}"><i class="fa-solid fa-circle-phone fa-2xs"></i></a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

• 用Bootstrap原生折叠属性替代手动JS，避免与Bootstrap Table渲染冲突
• 修正Secdon Engineer拼写为Second Engineer，确保选项值与post.position存储值完全匹配

三、修正初始化代码 #

补全自执行函数调用，移除不必要的selectpicker()（未引入对应插件时会报错）：

<script>
  (function() {
    $('#postTable').bootstrapTable({
      filterControl: true,
      showSearchClearButton: true,
      filterShowClear: true
    });
  })();
</script>

四、验证要点 #

• 检查浏览器控制台是否有JS加载错误
• 确认post.position的取值与筛选选项value完全一致（大小写、空格都要匹配）

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