Tablesorter 缺少带有语义 ui 的箭头

Question

您好，我正在尝试将 tablesorter 与 sematic ui 结合使用。当我使用它们时，通常位于列名右侧的两个箭头指针都丢失了。通常使用没有语义 ui 的 table 排序器有那些黑色箭头，当您单击它们时，它们将显示该列是按升序还是降序排序，但应用了语义 ui 主题table 那些不见了，我不知道如何把它们找回来。这是此行为的示例：

https://jsfiddle.net/bbxxomhx/878/

这是示例 table 我正在使用：

<table id="myTable" class="ui orange celled table tablesorter">
  <thead>
    <tr>
      <th>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>abc 1</td>
      <td>234</td>
      <td>Ox</td>
      <td>http://www.yahoo.com</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>10</td>
      <td>Girafee</td>
      <td>http://www.facebook.com</td>
    </tr>
    <tr>
      <td>zyx 24</td>
      <td>767</td>
      <td>Bison</td>
      <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
      <td>abc 11</td>
      <td>3</td>
      <td>Chimp</td>
      <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
      <td>abc 2</td>
      <td>56</td>
      <td>Elephant</td>
      <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>155</td>
      <td>Lion</td>
      <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
      <td>ABC 10</td>
      <td>87</td>
      <td>Zebra</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>zyx 1</td>
      <td>999</td>
      <td>Koala</td>
      <td>http://www.mit.edu/</td>
    </tr>
    <tr>
      <td>zyx 12</td>
      <td>0</td>
      <td>Llama</td>
      <td>http://www.nasa.gov/</td>
    </tr>
  </tbody>
</table>

Answer 1

因为语义 UI 替换了大多数主题中包含的页眉背景图像，您需要使用 css 图标选项和页眉模板将图标添加到页眉 (demo)

$(function() {
  $("#myTable").tablesorter({
    headerTemplate: '{content}{icon}',
    cssIcon: 'icon sort',
    cssIconDesc: 'down',
    cssIconAsc: 'up'
  });
});

此外，请确保您使用的是语义 UI v2.3.0，我注意到演示中使用的是 v2.2.2，排序箭头显示不正确。

Tablesorter 缺少带有语义 ui 的箭头

Tablesorter missing arrows with semantic ui

jquery

tablesorter

semantic-ui