I'm experiencing a basic bootstrap error. I attempted to create a searchable table using this example:
Unfortunately, the search function is not working when applied to my table. The table appears fully populated, but entering search terms like "CRY" yields no results. I'm unsure if the issue lies in my bootstrap setup (though it seems simple) or in the JavaScript code. When attempting to search the table, nothing happens - not even upon pressing enter.
Here is the header section:
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0bde4f1f2fcf5d0a1bea1a6bea0">[email protected]</a>/dist/bootstrap-table.min.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f520b1e1d131a3f4e514e49514f">[email protected]</a>/dist/bootstrap-table.min.js"></script>
In the body section:
<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" >Variant Table</button>
<div class="row">
<div class="collapse multi-collapse" id="varianttable">
<div class="card card-body">
<table id="vtable" class="table table-striped table-condensed" data-toggle="vtable" data-search="true">
<thead>
<tr>
<th data-field="basic.row" data-sortable="true" data-searchable="false">ID</th>
<th data-field="basic.gene" data-sortable='true' data-searchable='true'>Gene</th>
<th data-field="basic.chr" data-sortable='true'>Chr</th>
<th data-field="basic.pos" data-sortable='true'>Pos</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Lastly, the JavaScript code:
<script>
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})
})
</script>
I'm wondering if I am missing an action or a response handler in the JavaScript code. Any advice would be appreciated.