Bootstrap Table - Filter Columns not working

In this Django Project, I attempting to create a Bootstrap Table with collapsible rows and filter columns. I’ve managed to make the collapsable rows work perfectly, but the column filtering is not working at all.

The filter columns are not working, the select fields are visible and drop downs for selecting work, but when an item is selected, the table does not filter. I’m curious if I’m not using the object values correctly?

Bootstrap5 CDN is included in the _base.html header

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

Full code:

<!-- templates/post_list.html -->

{% extends "_base.html" %}

{% block content %}

<div class="container">
    <a class="jy-btn-text" href="{% url 'post_new' %}"><div class="yj-btn">Post New Job</div></a>
</div>

<div class="container">
    <div class="table-wrapper">
        <div class="col-md-12">
            <div class="panel-heading">
                <h4 class="jy-text">Current Job Posts</h4>
            </div>
            <div class="table-responsive">
            <link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
            <script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
            <!--
            <link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
            <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
            <script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
            -->
                <table class="table table-sm" id="postTable" data-filter-control="true" data-show-search-clear-button="true">
                    <thead>
                        <tr>
                            <th scope="col"><h6 class="jy-text">  <h6></th>
                            <th scope="col"><h6 class="jy-text">Date<h6></th>
                            <th scope="col" data-field="title">
                                <div class="th-inner"><h6 class="jy-text">Title<h6></div>
                                <div class="fth-cell">
                                    <div class="filter-control">
                                        <!--<input type="search" class="form-control bootstrap-table-filter-control-name search-input" stryle="width: 100%;" placeholder value>-->
                                        <input type="text" class="form-control form-control-sm bootstrap-table-filter-control-title" style="width: 100%;" placeholder="" data-input="true" data-field="title">
                                    </div>
                                </div>
                            </th>
                            <th scope="col" data-field="position">
                                <div class="th-inner"><h6 class="jy-text">Position<h6></div>
                                <div class="fth-cell">
                                    <div class="filter-control">
                                        <select class="form-control form-control-sm bootstrap-table-filter-control-position" style="width: 100%;" data-input="true" data-field="position">
                                            <option value></option>
                                            <option value="{{ post.position }}">Captain</option>
                                            <option value="Mate">Mate</option>
                                            <option value="ETO">ETO</option>
                                            <option value="Chief Engineer">Chief Engineer</option>
                                            <option value="Secdon Engineer">Secdon Engineer</option>
                                            <option value="Engineer / Deckhand">Engineer / Deckhand</option>
                                            <option value="Chef">Chef</option>
                                            <option value="Sous Chef">Sous Chef</option>
                                            <option value="Chief Steward(ess)">Chief Steward(ess)</option>
                                            <option value="Second Steward(ess)">Second Steward(ess)</option>
                                            <option value="Deckhand / Steward(ess)">Deckhand / Steward(ess)</option>
                                            <option value="Deckhand">Deckhand</option>
                                            <option value="Estate Staff">Estate Staff</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                </div>
                            </th>
                            <th scope="col"><h6 class="jy-text">Type<h6></th>
                            <th scope="col"><h6 class="jy-text">Location<h6></th>
                            <th scope="col"><h6 class="jy-text">LOA<h6></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for post in post_list %}
                        <tr data-toggle="collapse" data-target="#hidden-row-{{ post.id }}">
                            <td>
                                <button class="btn btn-default btn-xs"><p class="jy-text">+</p></button>
                            </td>
                            <td scope="row"><p class="jy-text">{{ post.date_post }}</p></td>
                            <td scope="row"><p class="jy-text">{{ post.title }}</p></td>
                            <td scope="row"><p class="jy-text">{{ post.position }}</p></td>
                            <td scope="row"><p class="jy-text">{{ post.employment }}</p></td>
                            <td scope="row"><p class="jy-text">{{ post.location }}</p></td>
                            <td scope="row"><p class="jy-text">{{ post.vessel_size }}</p></td>
                        </tr>
                        <!-- Hidden Row -->
                        <tr id="hidden-row-{{ post.id }}" class="collapse">
                            <td colspan="7" class="hiddenRow">
                                <p class="jy-text">Description: {{ post.description }}
                                <p class="jy-text">Contact this job!</p>
                                <a href="mailto:{{ post.email }}"><i class="fa-solid fa-circle-phone fa-2xs"></i></a> <a href="tel:{{ post.phone }}"><i class="fa-solid fa-circle-envelope fa-2xs"></i></a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
  (function() {
    $('#postTable').bootstrapTable({
      filterControl: true,
      showSearchClearButton: true,
      filterShowClear: true,
      onPostBody: function() {
        // Initialize filter controls for 'title' and 'position' columns
        $('.bootstrap-table-filter-control-title').selectpicker();
        $('.bootstrap-table-filter-control-position').selectpicker();
      }
    });
  });
</script>

<!-- Collapsable rows -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var rows = document.querySelectorAll('.table tbody tr[data-toggle="collapse"]');
  rows.forEach(function(row) {
    row.addEventListener('click', function() {
      var target = this.getAttribute('data-target');
      var hiddenRow = document.querySelector(target);
      var display = window.getComputedStyle(hiddenRow).display;
      hiddenRow.style.display = (display === 'none') ? 'table-row' : 'none';
    });
  });
});
</script>


{% endblock content %}