Question

您好我正在尝试使用带有sematic ui的tablesorter。当我使用它们时，通常位于列名右侧的箭头指针都会丢失。通常情况下，没有语义ui的表分类器有那些黑色的arros，当你点击它们时，它们将显示列是按升序还是降序排序，但是在表上应用了语义ui主题，那些会丢失，我不知道如何带他们回来了。以下是此行为的示例：

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

这是我使用的样本表：

<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

由于语义用户界面取代了大多数主题中包含的标题背景图片，因此您需要使用css图标选项和标题模板将图标添加到标题中（demo）

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

另外，请确保您使用的是语义UI v2.3.0，我注意到在演示中使用了v2.2.2并且排序箭头未正确显示。

Tablesorter缺少语义ui的箭头

1 个答案: