引导表可搜索问题答案

【问题标题】：Bootstrap Table Searchable Issues引导表可搜索问题
【发布时间】：2020-05-11 19:41:42
【问题描述】：

我似乎遇到了某种基本的引导错误。我正在尝试创建一个可搜索的表 - 所以我在这里使用了这个例子：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/bootstrap-table@1.16.0/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/bootstrap-table@1.16.0/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 脚本端的操作或响应处理程序？

【问题讨论】：

我注意到的第一件事是您正在加载 Bootstrap 3 CDN，但您的引导表是 Bootstrap 4 的功能。这可能会解决您的大部分问题。

标签： javascript bootstrap-4 bootstrap-table searchable

【解决方案1】：

您正在加载 Bootstrap 3，特别是 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>

您应该使用 Bootstrap 4 CDN

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

您引用的示例是针对 Bootstrap v4 的。

【讨论】：