Bootstrap-table表格组件和jquery版本兼容问题

news/2024/12/4 17:10:36/文章来源:https://www.cnblogs.com/caroline2016/p/18586749

jquery版本引起的bootstrap-table组件表格未能渲染

最近写一个带分页的页面,使用了bootstrap-table组件,表格数据怎么都渲染不出来,控制台打印出了下面的信息:

一时有点懵,确认js代码及bootstrap-table用法没有任何问题后,将数据放入以前可正确渲染的页面中,表格正常渲染出来了。

仔细检查后发现两个环境中jquery版本不同,正确渲染的jquery版本是1.12.4,渲染报错的jquery版本是1.9.1

查看代码
 <link href="../plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="../plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="../plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /><script src="../plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="../plugins/jquery/jquery-1.12.4.min.js"></script>
<script src="../plugins/xlsx.full.min.js"></script>
<script src="../plugins/bootstrap-table/tableExport.min.js"></script>
<script src="../plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
<script src="../plugins/bootstrap-table/bootstrap-table-export.min.js"></script><div class="container-fluid"><div class="card p-1"><div id="toolbar"><button id="remove" class="btn btn-danger" disabled><i class="bi bi-trash"></i> Delete</button></div><tableclass="table table-bordered"id="table"data-locale="zh-CN"data-toolbar="#toolbar"data-search="true"data-show-refresh="true"data-show-fullscreen="true"data-show-columns="true"data-show-columns-toggle-all="true"data-show-export="true"data-click-to-select="true"data-minimum-count-columns="2"data-show-pagination-switch="true"data-pagination="true"data-id-field="id"data-page-size="5"data-page-list="[10, 25, 50, 100, all]"><thead><tr><th data-checkbox="true"></th><th data-field="id" data-width="10" data-width-unit="%" data-formatter="ID: %s">ID</th><th data-field="name" data-width="300" data-width-unit="px" data-formatter="nameFormatter">Item Name</th><th data-field="price" data-visible="true">Item Price</th></tr></thead></table></div>
</div><script>var $table = $("#table");var $remove = $("#remove");function getIdSelections() {return $.map($table.bootstrapTable("getSelections"), function (row) {return row.id;});}$table.on("check.bs.table uncheck.bs.table " + "check-all.bs.table uncheck-all.bs.table", function () {$remove.prop("disabled", !$table.bootstrapTable("getSelections").length);selections = getIdSelections();console.log(selections);});$remove.click(function () {var ids = getIdSelections();$table.bootstrapTable("remove", {field: "id",values: ids,});$remove.prop("disabled", true);showSuccMsg("success");});$(function () {var data = [{id: 0,name: "中文",price: "$0",},{id: 1,name: "国家",price: "$1",},{id: 2,name: "北京",price: "$2",},{id: 3,name: "上海",price: "$3",},{id: 4,name: "广州",price: "$4",},{id: 5,name: "深圳",price: "$5",},];$table.bootstrapTable("destroy").bootstrapTable({exportDataType: "all",exportTypes: ["excel"],data: data,exportOptions: {fileName: "文件名",mso: {fileFormat: "xlshtml",pageFormat: "a4",pageOrientation: "portrait",worksheetName: "工作表名",},ignoreColumn: [0],onCellHtmlData: function (cell, row, col, data) {// console.log(cell, row, col, data)return data;},},});});function nameFormatter(value) {return "name:" + value;}
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/846737.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vulnhub Connect-The-Dots

0x01:端口扫描 主机发现 nmap -sn 192.168.231.0/24全端口扫描 nmap --min-rate 10000 -p- 192.168.231.144开放21ftp,80http,111rpcbind,2049nfsrpcbind 主要的作用是将网络上的 RPC 服务与其对应的端口进行关联。它充当了客户端和服务器之间的桥梁,使得客户端可以通过服…

办公自动化处理展示

1、自动绘制地质图2、自动出高速公路路面自检资料3、自动出高速公路路基自检资料4、自动出高速公路T梁预制自检资料5、自动出高速公路桩基资料自检资料6、自动出高速垫石自检资料7、自动化操作网页8、CAD编程提取点坐标9、扫描的PDF自动识别文字或表格10、pdf文件自动拆分并命名…

使用脚本发布订阅

建使用本地分发服务器】/************************【使用本地分发服务器配置发布】***********************/ -- SqlServer 2008 R2 -- https://technet.microsoft.com/zh-cn/library/ms151860(v=sql.105).aspx use master go -- 服务器上是否已安装分发…

form标签中的button未指明type时默认的类型是什么

form中button未指明type时,默认type为submit 遇到了一个奇怪的现象:一个按钮打开一个Bootstrap模态框,模态框有几个表单字段和两个按钮,两个按钮可以关闭模态框,点击其中一个按钮关闭模态框后页面居然刷新了。 仔细检查后发现点击的按钮未指明type,浏览器把按钮type默认为…

kubernetes菜鸟学习笔记

目录环境准备dockerminikube启动minikube其他命令kubectlkubernetes dashboardKubernetesPodDeployment自动扩缩容升级版本版本回退探针探针配置项启动探针(startupProbe)就绪探针 (readinessProbe)存活探针(livenessProbe)配置示例Service示例Service和Ingress的区别Ingress示…

20222404 2024-2025-1 《网络与系统攻防技术》实验七实验报告

1.实验内容 总结一下本周学习内容,不要复制粘贴 2.实验过程 2.1 简单应用SET工具建立冒名网站 攻击机:kaii 192.168.47.141 靶机:windows xp 192.168.47.145 2.1.1 查看apache工具的默认端口,发现是80端口,于是就不用修改了查看本机的80端口是否被其他进程占用。 netstat …

python +excel 根据品类求涨出和亏损的商品的前三和后三

import pandas as pd# 读取原始数据 df = pd.read_excel(D:\\work\\2\\配料原始表.xlsx, sheet_name=Sheet1)# 按品类分组并处理数据 grouped = df.groupby(品类名称) result_dfs = [] for category, group in grouped:# 筛选亏损数据并整理格式loss_df = group[group[差异金额…

简单编写Makefile与使用make工具

简单编写Makefile与使用make工具 在不使用make工具下对c文件的编译 gcc main.c -o outgcc 《目标文件》 -o 《生成执行文件》编译main.c文件-->out.exe生成out.exe可执行文件 执行out.exe ./out.exe成功执行main编译结果PS: 在window下生成的可执行文件为后缀.exe文件windo…

sy

aHR0cHM6Ly9hcHAuc3V5aW53ZWFsdGguY29tL3N5bGMvcGFnZS9pbmRleC5odG1sI3BhZ2UvMTAvMTkvUDEwMTkuaHRtbD9wcmRDb2RlPUowMjM0Nw== 加密 开始两个debugger都可以使用“一律不在此处暂停过掉”跟栈,或者搜encrypt都可以找到加密位置 b就是请求数据 k是b生成H_TIME和H_NONCE(随机生成…

lua学习day2(懒狗随便记录)

其余的东西都大差不差,主要是我太懒了,写写pcall和xpcall吧pcall能获得调用方法、调用结果,xpcall同样也是可以的,但是里面包含了一个异常处理方法。pcall示例xpcall调用那就大致这。懒狗。。。。。。。

centos7+docker dock-compose使用

简介 Docker-Compose是Docker官方的开源项目,用于实现Docker容器集群的快速编排。 Compose简介 Compose是用于定义和运行多容器 Docker 应用程序的工具,通过Compose,可以使用YML文件来配置应用程序所需要的所有服务。然后,使用一个命令,就可以从YML文件配置中创建并启动所…

jjyh

aHR0cHM6Ly9tYmFuay5qamViYW5rLmNuL2pqY2NiV2ViL2luZGV4Lmh0bWwjL2ZpbmFuY2lhbE1hbmFnZS9saXN0P2ZpcnN0RmxhZz0zJnNlY29uZEZsYWc9JnNvcnRGbGFnPSZwcmRUeXBlRmxhZz0mY2xhc3NpZnlMaXN0VmFsdWU9JlBkQXJyYXlWYWx1ZT0mY2xhc3N0b3A9dHJ1ZQ== 包分析抓包看到的四个api的请求url皆为htt…