为什么Bootstrap的下拉式切换在某些环境下工作，而不是在其他环境中?

I am absolutely perplexed by why the dropdown menu for the page size("Showing 10 records per page") at the bottom of my Bootstrap table works in some environments but not the others. I wanted to create a Bootstrap Table with the pagination feature just like this. When I previewed the code through Sublime Text or Brackets(Adobe's text editor), the dropdown menu was not functional. When I inserted my code to my Squarespace blog at the bottom of the page, it did not work either. However, when I inserted the code to JSFiddle or my Webflow site, it worked. What could possibly be causing the conflict? I am new to programming and would appreciate if you could give me some hints on how to fix the problem!

我非常困惑为什么页面大小的下拉菜单(“每页显示10个记录”)在我的引导表的底部是在某些环境中工作，而不是在其他环境中。我想创建一个带分页功能的引导表，就像这样。当我通过出色的文本或括号(Adobe的文本编辑器)预览代码时，下拉菜单就不起作用了。当我将我的代码插入到页面底部的Squarespace博客时，它也不起作用。但是，当我将代码插入到JSFiddle或我的Webflow站点时，它就起作用了。是什么导致了这场冲突?我是编程新手，如果您能给我一些解决问题的提示，我将不胜感激!

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table data-toggle = "table" data-pagination = "true" data-pagination = "true" data-page-list="[10, 20, 50, 100, 200]">
    <thead>
        <tr>
            <th data-sortable="true">Symbol</th>
            <th data-sortable="true">Company Name</th>
            <th data-sortable="true">EV/EBITDA</th>
            <th data-sortable="true">Trailing P/E</th>
            <th data-sortable="true">Forward Dividend Yield</th>
            <th data-sortable="true">Payout Ratio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FLWS</td>
            <td>1-800 FLOWERS.COM, Inc.</td>
            <td>9.18</td>
            <td>28.33</td>
            <td>N/A</td>
            <td>N/A</td>
        </tr>
        ...
    </tbody>
</table>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

1 个解决方案

#1

jQuery needs to be loaded before Bootstrap's JS file(s):

在Bootstrap的JS文件之前，需要加载jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

It works on jsFiddle because they generate markup that orders the libraries correctly. You would see the same behavior on this site, if you loaded your libraries in the same order in a Stack Snippet.

它在jsFiddle上工作，因为它们生成了正确地命令库的标记。如果您在堆栈代码片段中以相同的顺序加载库，您将在这个站点上看到相同的行为。

It's worth noting that this is called out explicitly on Bootstrap's site:

值得注意的是，这在Bootstrap的网站上被明确地调用:

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

还要注意，所有插件都依赖于jQuery(这意味着jQuery必须包含在插件文件之前)。

#1