Using sorttable - JavaScript Library - to Sort HTML Table

Question

I created a table in html for which I need each column to be sorted alphabetically when clicked on the headers. I found a suggestion to add the sorrtable.js library and add the class name sortable to the table. When I run the html page directly on PyCharm, it does the sorting successfully, but when I run the web app as a whole, the headers do not allow sorting. In essence, clicking the headers does nothing. I don't understand what could be causing this. Any help would be greatly appreciated!!

My HTML Code:

<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

Do you load your sorttable.js file correctly? I made below snippet by just copy-paste your table structur and just load the sorttable js differently. everything looks ok. doesn't it?

 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>