Incorporating the Filter Control extension with my bootstrap table is my goal.
On the server side, I am utilizing django as the framework.
The necessary CSS and JS files that I have included are:
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
<link rel="stylesheet"" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css"/>
<link rel="stylesheet"" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.js" ></script>
Below is my HTML table setup:
<table
id="table"
data-toggle="table"
data-pagination="true"
data-pagination-h-align="left"
data-pagination-detail-h-align="right"
data-page-size="25"
data-page-list="[10, 25, 50, 100, all]"
data-search="true"
data-show-columns="true"
data-filter-control="true"
data-show-search-clear-button="true"
data-show-refresh="true"
data-url="../get_track_list">
<thead>
<tr>
<th data-field="datetime_start" data-formatter="DateFormatter" data-sortable="true" data-switchable="false" data-searchable="false">Date</th>
<th data-field="name" data-formatter="ActivityLinkFormatter" data-switchable="false">Name</th>
<th data-field="sport" data-formatter="SportSymbolFormatter" data-sortable="true" data-searchable="false" data-filter-control="select">Sport</th>
</tr>
</thead>
</table>
The data-url points to a JSON file retrieved from a django request.
The resulting table layout can be seen here: https://i.sstatic.net/RmI96.png
No errors appear in the browser console. However, although the filter-control div is created, the dropdown field itself does not show up. Reviewing my implementation, it seems like the issue lies with the
data-filter-control="select"data-formatter defined in my JS file.