title: Bootstrap Table Searchable Issues
body: <p>I seem to be having some kind of basic bootstrap error.  I am trying to create a searchable table - so I used the example here: <a href="https://examples.bootstrap-table.com/#column-options/searchable.html#view-source" rel="nofollow noreferrer">https://examples.bootstrap-table.com/#column-options/searchable.html#view-source</a></p>
  
  <p>When applied to my table it doesn't seem to be working.  It's either an error in my bootstrap (which seems unlikely given how simple this is) or in the Javascript.  But when I try to search the table nothing happens.  Note that the table, fully populated shows up.  But when I put "CRY" for example in the search bar nothing happens (not even on enter).</p>
  
  <p>In The Header section</p>
  
  <pre><code>&lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"&gt;
  &lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In the body</p>
  
  <pre><code>            &lt;button class="btn btn-lg btn-block active" type="button" data-toggle="collapse" data-target="#varianttable" style="background-color:#84AF3C" aria-expanded="true" aria-controls="varianttable" &gt;Variant Table&lt;/button&gt;
              &lt;div class="row"&gt;
                  &lt;div class="collapse multi-collapse" id="varianttable"&gt;
                      &lt;div class="card card-body"&gt;
  
                          &lt;table id="vtable" class="table table-striped table-condensed" data-toggle="vtable" data-search="true"&gt;
                              &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th data-field="basic.row" data-sortable="true" data-searchable="false"&gt;ID&lt;/th&gt;
                                  &lt;th data-field="basic.gene" data-sortable='true' data-searchable='true'&gt;Gene&lt;/th&gt;
                                  &lt;th data-field="basic.chr" data-sortable='true'&gt;Chr&lt;/th&gt;
                                  &lt;th data-field="basic.pos" data-sortable='true'&gt;Pos&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And finally the JavaScript</p>
  
  <pre><code>            &lt;script&gt;
                  var $table = $('#vtable')
  
                  $(function() {
                      var data = [ {'basic.row':1, 'basic.chr':"2", 'basic.gene':"CRYGB", 'basic.pos':209010776},
                                   {'basic.row':2, 'basic.chr':"X", 'basic.gene':"PPV", 'basic.pos':12973453} ]
  
                      $table.bootstrapTable({data: data})
  
                  })
  
              &lt;/script&gt;
  </code></pre>
  
  <p>Am I missing an action or a response handler on the java script side?</p>