使用 sorttable - JavaScript 庫 - 對 HTML 表進行排序

Question

我在 html 中創建了一個表，我需要在單擊標題時按字母順序對每一列進行排序。 我找到了添加 sorrtable.js 庫並將 class 名稱可排序到表中的建議。 當我直接在 PyCharm 上運行 html 頁面時，它會成功排序，但是當我運行 web 應用程序作為一個整體時，標題不允許排序。 本質上，單擊標題什么都不做。 我不明白是什么原因造成的。 任何幫助將不勝感激！！

我的 HTML 代碼：

<script src="sorttable.js"> </script>

{% block content %}

<div class="container">
    <div class="row">
        <div class="col md-12">

            <div style="width:1110px; margin-top: 40px" class="jumbotron p-3">

                <table class="sortable table table-hover table-striped">

                    <thead>
                    <tr>
                            <th>Guidance Tracker</th>
                            <th>Department</th>
                            <th>Agency</th>
                            <th>Funding Source</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td>KJ</td>
                        <td>Department of Health and Human Services</td>
                        <td>Health Resources</td>
                        <td><a href="/Department">PPP-Rural Health</a></td>

                    </tr>

                    <tr>
                        <td>Lauren</td>
                        <td>Department of Treasury</td>
                        <td>Internal Revenue Service</td>
                        <td><a href="/Department">2021 Recovery Rebates</a></td>
                    </tr>

                    <tr>
                        <td>Liam</td>
                        <td>Department of Agriculture</td>
                        <td>Department of Agriculture</td>
                        <td><a href="/Department">CARES-Food Assistance</a></td>
                    </tr>

                    <tr>
                        <td>Jackson</td>
                        <td>Department of Justice</td>
                        <td>Office of Justice Programs</td>
                        <td><a href="/Department">CARES-Supplemental Funding</a></td>
                    </tr>
                </tbody>
               </table>


        </div>
      </div>
    </div>
</div>

{% endblock content %}

Answer 1

您是否正確加載了 sorttable.js 文件？ 我通過復制粘貼您的表格結構並以不同方式加載 sorttable js 制作了以下片段。 一切看起來都很好。 不是嗎？

 table,tr,td,th { border: 1px solid #000; border-collapse: collapse; padding: 10px }

 <script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script> <div class="container"> <div class="row"> <div class="col md-12"> <div style="width:1110px; margin-top: 40px" class="jumbotron p-3"> <table class="sortable table table-hover table-striped" id='test'> <thead> <tr> <th>Guidance Tracker</th> <th>Department</th> <th>Agency</th> <th>Funding Source</th> </tr> </thead> <tbody> <tr> <td>KJ</td> <td>Department of Health and Human Services</td> <td>Health Resources</td> <td><a href="/Department">PPP-Rural Health</a></td> </tr> <tr> <td>Lauren</td> <td>Department of Treasury</td> <td>Internal Revenue Service</td> <td><a href="/Department">2021 Recovery Rebates</a></td> </tr> <tr> <td>Liam</td> <td>Department of Agriculture</td> <td>Department of Agriculture</td> <td><a href="/Department">CARES-Food Assistance</a></td> </tr> <tr> <td>Jackson</td> <td>Department of Justice</td> <td>Office of Justice Programs</td> <td><a href="/Department">CARES-Supplemental Funding</a></td> </tr> </tbody> </table> </div> </div> </div> </div>