jquery tablesorter添加标题/工具提示以显示升序/降序

Question

我正在使用jquery tablesorter。我喜欢这里的一个表：

http://tablesorter.com/docs/

除了我想要的列标题到每个具有当他们上空盘旋，用鼠标标题/提示。例如，名字的默认标题是“按名排序”，然后它将变为“按升序排名”或“按降序排名”等等。我怎么能做到这一点，因为图像是在标题图像的CSS，并没有设置在每一个？

table.tablesorter thead tr .headerSortDown {   background-image: url(desc.gif); } 
table.tablesorter thead tr .headerSortUp {   background-image: url(asc.gif); } 
table.tablesorter thead tr .header {   background-image: url(bg.gif);   background- repeat: no-repeat;   background-position: center right;   cursor: pointer; } 

Answer 1

这是我会怎么做呢？建立一个数据标题与您要添加的文本的每个标题单元格。但不是说“是”，“升序”或“降序”，我们将使用名为“{}目录”可置换变量方向：

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th data-title="sort {dir} last name">Last</th> 
      <th data-title="sort {dir} first name">First</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>Smith</td><td>John</td></tr> 
     <tr><td>Jones</td><td>Timothy</td></tr> 
     <tr><td>Wong</td><td>Jin</td></tr> 
     <tr><td>O'Brien</td><td>Shaun</td></tr> 
     <tr><td>Parker</td><td>Peter</td></tr>   
    </tbody> 
</table> 

然后，我们添加的功能要经过每个表头单元格，并根据它找到的类名更新标题。调用它，并确保在每个表排序完成后调用它。

var table = $('table'), 

    updateTitles = function(){ 
     var t, $this; 
     table.find('thead th').each(function(){ 
      $this = $(this); 
      t = "by"; 
      if ($this.hasClass('headerSortUp')) { 
       t = "ascending"; 
      } else if ($this.hasClass('headerSortDown')) { 
       t = "descending"; 
      } 
      $this.attr('title', $this.attr('data-title').replace(/\{dir\}/, t)); 
     }); 
    }; 

table.tablesorter(); 

// bind to sort events 
table.bind("sortEnd",function() { 
    updateTitles(); 
}); 
// set up titles 
updateTitles(); 

这是working demo。