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>