Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/.net/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery Tablesorter缺少带有语义ui的箭头_Jquery_Semantic Ui_Tablesorter - Fatal编程技术网

Jquery Tablesorter缺少带有语义ui的箭头

Jquery Tablesorter缺少带有语义ui的箭头,jquery,semantic-ui,tablesorter,Jquery,Semantic Ui,Tablesorter,嗨,我正在尝试将tablesorter与语义ui结合使用。当我使用它们时,通常位于列名右侧的两个箭头指针都会丢失。 通常情况下,对于没有语义ui的table sorter,有一些黑色的ARRO,当你点击它们时,它们会显示列是按升序还是降序排序的,但是如果在表上应用了语义ui主题,这些就会丢失,我不确定如何将它们带回来。 以下是这种行为的示例: 这是im使用的示例表: <table id="myTable" class="ui orange celled table tablesorter

嗨,我正在尝试将tablesorter与语义ui结合使用。当我使用它们时,通常位于列名右侧的两个箭头指针都会丢失。 通常情况下,对于没有语义ui的table sorter,有一些黑色的ARRO,当你点击它们时,它们会显示列是按升序还是降序排序的,但是如果在表上应用了语义ui主题,这些就会丢失,我不确定如何将它们带回来。 以下是这种行为的示例:

这是im使用的示例表:

<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>

字母数字
数字的
动物
地点
abc 123
10
考拉
http://www.google.com
abc 1
234
公牛
http://www.yahoo.com
abc 9
10
吉拉菲
http://www.facebook.com
zyx 24
767
野牛
http://www.whitehouse.gov/
abc 11
3.
黑猩猩
http://www.ucla.edu/
abc 2
56
大象
http://www.wikipedia.org/
abc 9
155
狮子
http://www.nytimes.com/
ABC 10
87
斑马
http://www.google.com
zyx 1
999
考拉
http://www.mit.edu/
zyx 12
0
美洲驼
http://www.nasa.gov/

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

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

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