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>
<table
class="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> 