javascript - 引导表可搜索问题
问题描述
我似乎有某种基本的引导错误。我正在尝试创建一个可搜索的表 - 所以我在这里使用了这个例子: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,特别是 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 的。
推荐阅读
- r - 如何将行名称提取为变量,以便将其应用于另一个数据框
- chromecast - ChromeCast 如何与接收方应用和发送方应用通信?
- c# - 如何在webapi c#中配置路由,以便可以使用任何变量名代替{id}
- mysql - MySQL LIMIT 在 Prestashop 模块中不起作用
- javascript - 如何将鼠标跟踪效果添加到特定的 wordpress 行?
- ios - Swift 从特定文档目录位置删除所有文件
- python - 网站被抓取但未被抓取 Scrapy
- terraform - python terraform apply auto approve not working
- go - 在 Visual Studio Code WSL 中调试 Go 代码
- perl - Perl 搜索唯一的行和相应的文件名