TABLESORTER - TABLESORTERで最初の列を静的/固定にするにはどうすればよいですか？

Question

私は各行に番号を付けたいと思いますが、それらの番号は移動/並べ替えがありません。最初の列＃は静的/固定である必要があります。他の列はすべて必要に応じてソートされます。

これは可能ですか？ここで

は私のthead要素である：

   <thead> 
       <tr> 
        <th>#</th> 
        <th>Part No.</th> 
        <th>Board</th> 
        <th>Status</th> 
        <th>Auth QTY</th> 
        <th>Cur QTY</th> 
        <th>RELS</th> 
        <th>WIP QTY</th> 
        <th>TBD</th> 
       </tr> 
      </thead> 

Answer 1

を残し浮かべ持つことができます〜になる

// add custom numbering widget 
$.tablesorter.addWidget({ 
    id: "numbering", 
    format: function(table) { 
     var c = table.config; 
     $("tr:visible", table.tBodies[0]).each(function(i) { 
      $(this).find('td').eq(0).text(i + 1); 
     }); 
    } 
}); 

$("table").tablesorter({ 
    // prevent first column from being sortable 
    headers: { 
     0: { sorter: false } 
    }, 
    // apply custom widget 
    widgets: ['numbering'] 
}); 

注：独自のウィジェット（demo）を書き、私は、英数字の並べ替え、より多くの例ページと以前に文書化されていないオプションでgithubにtablesorterプラグインのコピーをフォークしてきました。あなたが興味を持っている場合にのみ:)

Answer 2

2つのテーブルをインライン表示したり、私は最善の方法は、と思う

http://jsfiddle.net/AfmPz/

td, th 
 
{ 
 
    padding:3px; 
 
} 
 
table 
 
{ 
 
    float:left; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Part No.</th> 
 
     <th>Board</th> 
 
     <th>Status</th> 
 
     <th>Auth QTY</th> 
 
     <th>Cur QTY</th> 
 
     <th>RELS</th> 
 
     <th>WIP QTY</th> 
 
     <th>TBD</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
    </tr> 
 
    <tr> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
    </tr> 
 
    <tr> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
     <td>na</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

これはCSSを使用することができますが、それは最新のブラウザを使用しているユーザーに依存しますが、私はそれをオフハンドでテストすることはできませんが、おそらくIEでサポートされていない：

table { 
    counter-reset: rowNum; 
} 

tbody tr { 
    position: relative; 
    counter-increment: rowNum; 
} 

thead tr:before { 
    content: ''; /* important, otherwise the columns don't line up properly */ 
} 

tbody tr:before { 
    content: counter(rowNum); 
    left: -2em; 
} 

JS Fiddle demo。

アプローチを比較するために、現在の番号付けをそのまま残しました。実際には、このソリューションを適用する場合は、これを（おそらく）削除する必要があります。