bootstraptable解决问题过程

最新推荐文章于 2025-01-11 17:21:24 发布

原创最新推荐文章于 2025-01-11 17:21:24 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文解决在使用BootstrapTable时遇到的两个常见问题：Bootstrap的下拉菜单需要Popper.js，以及“uisnotaconstructor”错误。介绍了正确的文件引入顺序，并提供了解决方案，包括下载并正确引用Popper.js。

bootstraptable解决问题过程

前言

jQuery v3.4.1
Bootstrap v4.4.1
bootstrap-table v1.16.0
@popperjs/core v2.1.1

问题一：Bootstrap’s dropdowns require Popper.js

在这里插入图片描述

dropdown.js:164 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    at c.t.show (dropdown.js:164)
    at c.t.toggle (dropdown.js:137)
    at HTMLButtonElement.<anonymous> (dropdown.js:375)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:362)
    at HTMLButtonElement.<anonymous> (dropdown.js:528)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.v.handle (jquery.min.js:2)

解决：下载保存为popper.min.js
文件引入顺序

    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/popper.min.js"></script>
   <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="/static/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-table-zh-CN.min.js"></script>

问题二：u is not a constructor

在这里插入图片描述
点击选择每页个数出错

dropdown.js:186 Uncaught TypeError: u is not a constructor
    at c.t.show (dropdown.js:186)
    at c.t.toggle (dropdown.js:137)
    at HTMLButtonElement.<anonymous> (dropdown.js:375)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:362)
    at HTMLButtonElement.<anonymous> (dropdown.js:528)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.v.handle (jquery.min.js:2)

解决一：使用bootstrap3
解决二: 去官网查找方案
官网使用Bootstrap v4.3.1 这个差别不打，我再查看popper.min.js发现这个有大不同

把这个下载下来
然后就成功了