Why Does Bootstrap's Dropdown Toggle Work in Some Environments But Not the Others?

Question

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!

<!-- 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>

Answer 1

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

<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.

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

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