时间戳

首页 > 解决方案 > 使用引导程序 4 将 A 排序到 Z 或 Z 到 A 时，我的表没有排序

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

问题描述

<!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 如何获得我的表与引导程序 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>

标签： javascripthtmlsorting

解决方案

查看sorttable,js——它可以让你做你想做的事情，而且设置起来非常简单。

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

推荐阅读