一、报错代码 <table class="table table-hover text-center" id="table" data-toggle="table" data-search="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]" data-response-handler="responseHandler"> <thead> <tr> <th data-sortable="true" data-field="id">ID</th> <th data-sortable="true" data-field="status">扫描状态</th> <th data-sortable="true" data-field="target">扫描目标</th> <th data-sortable="true" data-field="scan_type">扫描类型</th> <th data-sortable="true" data-field="vuln">漏洞</th> <th data-sortable="true" data-field="plan">添加时间</th> <th>导出报告</th> <th>删除任务</th> </tr> </thead> <tbody> <!--数据部分省略，调的后端数据--> </tbody> </table>

以上代码中，table中这一部分内容无法引入，也就无法为table写入样式

data-toggle="table" data-search="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]" data-response-handler="responseHandler" 二、报错显示 Uncaught Error: Syntax error, unrecognized expression: <div class="bootstrap-table bootstrap5"> <div class="fixed-table-toolbar"></div> <div class="fixed-table-container"> <div class="fixed-table-header"><table></table></div> <div class="fixed-table-body"> <div class="fixed-table-loading"> <span class="loading-wrap"> <span class="loading-text">Loading, please wait</span> <span class="animation-wrap"><span class="animation-dot"></span></span> </span> </div> </div> <div class="fixed-table-footer"></div> </div> <div class="fixed-table-pagination"></div> </div> at Function.ut.error (jquery.min.js:4) at gt (jquery.min.js:4) at kt (jquery.min.js:4) at Function.ut [as find] (jquery.min.js:4) at init.find (jquery.min.js:5) at new init (jquery.min.js:4) at Object.x [as default] (jquery.min.js:4) at BootstrapTable.initContainer (bootstrap-table.js:4120) at BootstrapTable.init (bootstrap-table.js:4049) at HTMLTableElement.<anonymous> (bootstrap-table.js:7517)

三、原因

可以得出，是jquery的错误。因为我的bootstrap v5，而jquery v2，版本不够（居然jquery v2都不够！！！）。故来到jquery官网直接下载最新版，或使用CDN引入。

四、解决

引入最新版jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 五、最终效果

曾经的table： 现在的table： 最终实现列排序以及分页效果。

六、bootstrap-table学习总结 6.1 引入插件

在已经引入bootstrap.min.css与 bootstrap.bundle.js 的条件下！ bootstrap-table官网下载，后引入其中三个文件bootstrap-table.min.css、bootstrap-table.min.js、bootstrap-table-zh-CN.min.js

因为用到bootstrap-table的弹窗选择页数功能，需要引入bootstrap.bundle.js组件，此时可以放弃原始的bootstrap.js。引入顺序参考以下：

<link rel="stylesheet" href="/static/css/bootstrap/bootstrap.css"> <link rel="stylesheet" href="/static/css/bootstrap/bootstrap-table.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script type="text/javascript" src="/static/js/bootstrap/bootstrap.bundle.js">/script> <!--Bootsrap Table--> <script type="text/javascript" src="/static/js/bootstrap/bootstrap-table.js"></script> <script type="text/javascript" src="/static/js/bootstrap/bootstrap-table-zh-CN.js"></script>

特别注意1：Bootstrap v5 需搭配 jquery v3及以上版本！ 特别注意2：table中需搭配thead与tbody!!! 特别注意3：使用Bootstrap-table插件需引入bootstrap.bundle.js，此时应放弃bootstrap.js，否则选择页数功能不可用!!!

6.2 table参数介绍 toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', //请求方式（*） striped: true, //是否显示行间隔色 cache: false, //是否使用缓存 toolbarAlign: "right", //工具栏对齐方式 sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端 uniqueId: "id", pageNumber: 1, //初始化加载第一页 pageSize: 1, //每页的记录行数 pageList: [1, 2, 3], //可供选择的每页的行数 pagination: true, // 是否分页 sortable: true, // 是否启用排序 sortOrder: "asc", //排序方式 showColumns: true, //是否显示列选择按钮 showRefresh: true, //是否显示刷新按钮 clickToSelect: true, //是否启用点击选中行 height: 500, //行高 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表

七、Reference

https://·/nangonghui/p/10945176.html

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。