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

これは私がそれを行う方法です...あなたが追加したいテキストで各見出しのセルにデータタイトルを設定します。しかし、その代わりに、「昇順」または「降順」「で」というのが、我々は方向のために、「{DIR}」という名前の交換可能な変数を使用します：

は

<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があります。