我正在寻找一种方法来排除使用 jQuery 的 tablesorter 插件对单个列进行排序。具体来说，我有一个相当大的表，并希望保持“行号”列固定，以便在排序后很容易看到特定行在表中的位置。
例如：
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
在名称列上排序时，应导致：
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
谢谢。
对于那些在寻找一种方法来排除列可排序（即列上的可点击标题）时发现这一点的人，下面的示例将列 4（零索引）排除在排序之外）：
$("table").tablesorter({
headers: {4: {sorter: false}}
});
这是一个您可以使用的小部件，它将完成您正在寻找的内容：
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
});
编辑：我在http://jsbin.com/igupu4/3制作了这种技术的样本。单击任何列标题进行排序...
虽然我没有回答您关于 jquery 的问题，但这是获得您在此处描述的特定行为的另一种方法，在排序后固定行号。（使用 CSS，特别是content 属性和与计数器相关的属性/功能。）
<html>
<head>
<title>test</title>
<style type="text/css">
tbody tr
{
counter-increment : rownum ;
}
tbody
{
counter-reset: rownum;
}
table#sample1 td:first-child:before
{
content: counter(rownum) " " ;
}
table#sample2 td.rownums:before
{
content: counter(rownum) ;
}
</style>
<script src="jquery-1.2.6.min.js" ></script>
<script src="jquery.tablesorter.min.js" ></script>
<script>
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>
</head>
<body>
<table id="sample1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
<tr>
<td>
<p>foo</p>
</td>
<td>
<p>quuz</p>
</td>
</tr>
<tr>
<td>bar</td>
<td>quux</td>
</tr>
<tr>
<td>baz</td>
<td>baz</td>
</tr>
</tbody>
</table>
<table id="sample2">
<thead>
<tr>
<th>Rownums</th>
<th>Col 1</th>
<th>Col 2</th>
<th>More Rownums</th>
</thead>
<tbody>
<tr>
<td class="rownums"></td>
<td>
<p>foo</p>
</td>
<td>
<p>bar</p>
</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>quuz</td>
<td>baz</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>fred</td>
<td>quux</td>
<td class="rownums"></td>
</tr>
</tbody>
</table>
</body>
</html>
如果您的浏览器足够兼容 CSS2.1，您可以在示例 1 中使用 tr:before 而不是 td:first-child:before。（Mozilla 目前仅在主干中支持此功能...）
在示例 2 中，您可以看到如何将行号列放置在任何位置，而不仅仅是在第一列中。
$("table").tablesorter({
headers: {4: {sorter: false},8: {sorter: false}}
});
这将跳过对第一列的排序，并允许对第二列进行排序。只需将所有列设置为真/假，从第一列开始为零。
<script>
$(document).ready(function() {
$("table").tablesorter({
headers: {
0: {sorter: false},
1: {sorter: true},
3: {sorter: false}
}//headers
});
});
</script>
Brian Fisher 的答案是正确的，但是在大型表中（在我的示例中为 +1600 行）太慢了。我改进了遍历每一行的方式。其他一切都是一样的。
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
$(table).find("tr td:first-child").each(function(index){
$(this).text(index+1);
})
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
});
人力资源管理系统。从 tablesorter 重组表格的方法来看，我很确定这不是完全可能的。Tablesorter 将每个 tr 从 DOM 中一一拉出，并根据索引字段对其进行排序，重新插入整个 tr 而不以任何方式更改 tr 的内容。然后，您请求的解决方案需要在每次排序后遍历表并重新枚举第一列。Tablesorter 确实有一个插件方法，供 zebrastripe 和其他扩展使用。也许这可以用来挂钩排序方法？
斯托博尔的答案是完美的。唯一的问题是需要等到表格完全呈现才能放入数字。
一些观察：
Note: The method shown by Abdul only restricts to the user to sort by the indicated columns, but his content is always ordered with the rest of the row when an order by other unrestricted column is selected.
只是这个问题的更新。虽然票数最高的答案是一个很好的解决方案，但 jstablesorter 团队添加了此功能，因此在您的 html 单元格中添加以下属性：
data-sorter="false"
这是一种禁用任何标题排序的无缝方式。