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。