使用引导程序 4 将 A 排序到 Z 或 Z 到 A 时，我的表没有排序答案

【问题标题】：My Table isn't sorting when sorting A to Z or Z to A with bootstrap 4使用引导程序 4 将 A 排序到 Z 或 Z 到 A 时，我的表没有排序
【发布时间】：2021-10-06 07:22:01
【问题描述】：

<!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/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.18.3/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="/user-interface.css"/>
<link rel="stylesheet"  href="/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>

我希望能够对表中的不同列从 A 到 Z 和 Z 到 A 进行排序。我以前可以让它工作，但现在它不能工作，因为我将代码更改为 bootstrap 4 如何让我的表与 bootstrap 4 一起工作，我需要 Javascript 代码吗？我遵循了https://bootstrap-table.com/ 中的一个示例，但我仍然无法让我的代码正常工作。

<!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/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.18.3/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="/user-interface.css"/>
<link rel="stylesheet"  href="/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>

【问题讨论】：

对数据集进行排序然后重新创建表会容易得多。
for 循环在 while 循环内...这听起来很奇怪

标签： javascript html sorting

【解决方案1】：

查看sorttable,js — 它可以让您完全完成您想要做的事情，并且设置起来非常简单。

您可以在常规 HTML 中创建表格，然后在包含此脚本后将其类设置为 "sortable"，以便在单击标题时按升序/降序排序。

【讨论】：

不是对您投反对票的人，但是当 OP 提出问题时，建议使用库而不是提供纯代码答案通常被认为很糟糕。原因是该库将来可能会过时，或者只是被删除，在这种情况下，当新用户将来看到此问题时，他们可能无法使用您的答案。