CODEWITHSUNDEEP
javascriptbootstrap-4bootstrap-tablesearchable
bnp0005
bnp0005

Reputation: 329

Bootstrap Table Searchable Issues

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: https://examples.bootstrap-table.com/#column-options/searchable.html#view-source

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).

In 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/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>

In the body

            <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>

And finally the JavaScript

            <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>

Am I missing an action or a response handler on the java script side?

Upvotes: 0

Views: 1286

Answers (1)

Kasey Chang
Kasey Chang

Reputation: 542

You are loading Bootstrap 3, specifically 3.3.7

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
...
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

You should be using Bootstrap 4 CDN

https://getbootstrap.com/docs/4.0/getting-started/introduction/

As the example you cited from is for Bootstrap v4.

Upvotes: 0

Related Questions