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

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>