My Table isn’t sorting when sorting A to Z or Z to A with bootstrap 4

Solution for My Table isn’t sorting when sorting A to Z or Z to A with bootstrap 4
is Given Below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Data Table Sortable Start-->
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<!--Data Table Sortable Start-->
<!--Bootstrap End-->
<!-- Our Files -->
<link rel="icon"
      type="image/png"
      href="images/house_icon.png"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
 <script defer src="/user_interface.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet"  href="http://stackoverflow.com/user-interface.css"/>
<link rel="stylesheet"  href="http://stackoverflow.com/nav-bar.css"/>
</head>
<body>


<!-- Generator Sites Start-->
<div class="container">
    <div class="row justify-content-center">
        <div class="generator-wrapper text-center" id="generator-section">          
            <div class="generator-list">
                <table id="generator-table" data-toggle="generator-table" data-sort-order="desc">
                    <div class="table-responsive">
                        <table class="table table-light table-striped" data-toggle="table" data-sort-name="miles" data-sort-order="desc">
                            <tr>
                                <th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
                            </tr>

                            <tr>
                                <th data-field="miles" data-sortable="true">Distance (Miles)</th>
                                <th data-field="feet" data-sortable="true">Distance (Feet) </th>
                                <th data-field="name" data-sortable="true">Generator Name </th>
                                <th> Generator Address </th>
                                <th data-field="type" data-sortable="true">Generator Type(s) </th>
                            </tr>                                   
                            <tbody id="generator-body">
                            </tbody>
                        </table>
                        <script>
                            $(function() {
                              $('#sortable').change(function () {
                                $('#table').bootstrapTable('refreshOptions', {
                                  sortable: $('#sortable')
                                })
                              })
                            })
                        </script>
                    </div>      
                </table>
            </div>
        </div>  
    </div>
</div>
<!--Generator Sites Table End -->
</body>
</html>

I want to be able to sort different columns in my Table from A to Z and Z to A.
I have been able to get this to work previously but now it is not working since I changed my code to bootstrap 4 How do I get my table to work with bootstrap 4 and do I need Javascript code?
I followed an example in the https://bootstrap-table.com/ but I am still having issues getting my code to work.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Data Table Sortable Start-->
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<!--Data Table Sortable Start-->
<!--Bootstrap End-->
<!-- Our Files -->
<link rel="icon"
      type="image/png"
      href="images/house_icon.png"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
 <script defer src="/user_interface.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet"  href="http://stackoverflow.com/user-interface.css"/>
<link rel="stylesheet"  href="http://stackoverflow.com/nav-bar.css"/>
</head>
<body>

<!-- Generator Sites Start-->
<div class="container">
    <div class="row justify-content-center">
        <div class="generator-wrapper text-center"  id="generator-section">         
            <div class="generator-list">
                <table id="generator-table" data-toggle="generator-table" data-sort-order="desc">
                    <div class="table-responsive">
                        <table class="table table-light table-striped" data-toggle="table" data-sort-name="miles" data-sort-order="desc">
                            <tr>
                                <th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
                            </tr>

                            <tr>
                                <th data-field="miles" data-sortable="true">Distance (Miles)</th>
                                <th data-field="feet" data-sortable="true">Distance (Feet) </th>
                                <th data-field="name" data-sortable="true">Generator Name </th>
                                <th> Generator Address </th>
                                <th data-field="type" data-sortable="true">Generator Type(s) </th>
                            </tr>                                   
                            <tbody id="generator-body">
                            </tbody>
                        </table>
                        <script>
                            $(function() {
                              $('#sortable').change(function () {
                                $('#table').bootstrapTable('refreshOptions', {
                                  sortable: $('#sortable')
                                })
                              })
                            })
                        </script>
                    </div>      
                </table>
            </div>
        </div>  
    </div>
</div>
<!--Generator Sites Table End -->
</body>
</html>

Check out sorttable,js — it will let you do exactly what you’re trying to and is stupidly easy to set up.

You can make your table in regular HTML and then set its class to "sortable" after including this script to make the headers sort in ascending/descending order when you click them.