【Bootstrap】Bootstrap v5 Table插件疯狂踩坑记录

一、报错代码

<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://www.cnblogs.com/nangonghui/p/10945176.html