Bootstrap表可搜索的问题

Question

我似乎有一些基本的引导错误。我正在尝试创建可搜索的表-因此，我在这里使用了示例：https://examples.bootstrap-table.com/#column-options/searchable.html#view-source

应用于我的桌子时，它似乎不起作用。这可能是我的引导程序中的错误（考虑到这样做的简单性，这似乎不太可能发生）或Javascript中的错误。但是，当我尝试搜索表格时，什么也没有发生。请注意，将显示完全填充的表格。但是，当我在搜索栏中输入“ CRY”时，什么也没有发生（即使在输入时也没有）。

在标题部分

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

体内]

            <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>
最后是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>
我是否在Java脚本方面缺少动作或响应处理程序？

我似乎有一些基本的引导错误。我正在尝试创建可搜索的表-所以我在这里使用了示例：https：//examples.bootstrap-table.com/#column-options/searchable.html＃...

Answer 1

您正在加载Bootstrap 3，特别是3.3.7