title: bootstrap table: filter control not working
body: <p>With my bootstrap table I want to use the extension <a href="https://examples.bootstrap-table.com/#extensions/filter-control.html" rel="nofollow noreferrer">Filter Control</a></p>
  <p>Server side I'm using django.</p>
  <p>I include following css and js:</p>
  <pre><code>{% load bootstrap4 %}
  {% bootstrap_css %}
  {% bootstrap_javascript jquery='full' %}
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css&quot;/&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.css&quot;&gt;
  
  &lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.js&quot; &gt;&lt;/script&gt;
  </code></pre>
  <p>And here my html table:</p>
  <pre><code>&lt;table
    id=&quot;table&quot;
    data-toggle=&quot;table&quot;
    data-pagination=&quot;true&quot;
    data-pagination-h-align=&quot;left&quot;
    data-pagination-detail-h-align=&quot;right&quot;
    data-page-size=&quot;25&quot;
    data-page-list=&quot;[10, 25, 50, 100, all]&quot;
    data-search=&quot;true&quot;
    data-show-columns=&quot;true&quot;
    data-filter-control=&quot;true&quot;
    data-show-search-clear-button=&quot;true&quot;
    data-show-refresh=&quot;true&quot;
    data-url=&quot;../get_track_list&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th data-field=&quot;datetime_start&quot; data-formatter=&quot;DateFormatter&quot; data-sortable=&quot;true&quot; data-switchable=&quot;false&quot; data-searchable=&quot;false&quot;&gt;Date&lt;/th&gt;
        &lt;th data-field=&quot;name&quot; data-formatter=&quot;ActivityLinkFormatter&quot; data-switchable=&quot;false&quot;&gt;Name&lt;/th&gt;
        &lt;th data-field=&quot;sport&quot; data-formatter=&quot;SportSymbolFormatter&quot; data-sortable=&quot;true&quot; data-searchable=&quot;false&quot; data-filter-control=&quot;select&quot;&gt;Sport&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  <p>My data-url is a json file from a django request.</p>
  <p>The resulting table looks like this:
  <a href="https://i.stack.imgur.com/RmI96.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RmI96.png" alt="enter image description here" /></a></p>
  <p>I don't have any errors in the browser console. I also see the the filter-control div was created but not the dropdown field?
  <a href="https://i.stack.imgur.com/OBTSm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OBTSm.png" alt="enter image description here" /></a></p>
  <p>What I'm doing wrong, so that the <code>data-filter-control=&quot;select&quot;</code> field is not created?
  The table is rendered without using any js functions, in my js file are just the custom <code>data-formatter</code></p>