时间戳

首页 > 解决方案 > 语义 UI 表格排序功能不起作用

javascript - 语义 UI 表格排序功能不起作用

问题描述

我已经浏览了答案，但无法解决我遇到的问题，即在语义 Ui 可排序表中添加可排序标题，我认为这应该很简单。

我已按照此处的说明，链接源 JS 文件并调用 tablesort 函数。 https://semantic-ui.com/collections/table.html#sortable

我对javascript不太熟悉，所以如果我犯了一个明显的错误，请多多包涵。

我在 HTML 代码的头部添加了脚本调用

  <script type="text/javascript"  src="https://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script>
        $('table').tablesort();
    </script>

我的可排序表在正文中

  <body>
    <br><br>
      <div class = "ui container">
        <table class="ui sortable selectable celled table" id = 'sort_this'>
          <thead>
              <tr>
                <th>Logo</th>
                <th>Organisation</th>
                <th >Date</th>
                <th class="sorted ascending">Title</th>
                <th>Links</th>


              </tr>
          </thead>
          <tbody>
            {% for new in news %}
            <tr>
              <td>
                {% if new.News == 'BBC' %}
                <img class="ui small image" src="https://m.files.bbci.co.uk/modules/bbc-morph-news-waf-page-meta/5.1.0/bbc_news_logo.png" >
                {% elif new.News == 'Guardian' %}
                <img class="ui small image" src="https://jobs.theguardian.com/getasset/14928961-45c2-4f50-9d05-c150248727e7/" >
                {% elif new.News == 'DailyMail' %}
                <img class="ui small image" src="https://media-exp1.licdn.com/dms/image/C4D0BAQHLDxR_xaKdog/company-logo_200_200/0?e=2159024400&v=beta&t=wU8nCVHwAxdR-T8RAQpYM8eYS1KMKwrZZDcF5-Eco-Y" >
                {% endif %}
              </td>
              <td>{{new.News}}</td>
              <td>{{new.Date}}</td>
              <td><a href ="/Text/{{ new.id }}">{{new.title}}<a></td>
              <td>{{new.link}}</td>
            </tr>
            {% endfor %}

        </tbody>

      </table>
      </div>

尽管如此，当我单击任何列时，表格不会自行排序。我不确定我在这里缺少什么，并会感谢任何指导。

谢谢！

标签： javascripthtmlsemantic-ui

解决方案

推荐阅读