Question

我正在寻找一种方法来排除使用jQuery的tablesorter插件排序单个列。具体来说，我有一个相当大的表，并希望保持一个“行号”列固定，以便在排序后很容易看到表中特定行的位置。

例如：

#    name
-----------
1    papaya
2    apple
3    strawberry
4    banana

在名称列上排序时，应该产生：

#    name
-----------
1    apple
2    banana
3    papaya
4    strawberry

感谢。

Answer 1

对于那些在寻找排除列可排序的方法（即列上的可点击标题）时发现这种情况的人，下面的示例将第4列（零索引）排除在排序之外：

$("table").tablesorter({
    headers: {4: {sorter: false}}
});

Answer 2

您可以使用以下小部件来完成您的目标：

$(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']
    });

});

Answer 3

编辑：我在http://jsbin.com/igupu4/3制作了这项技术的样本。单击任何列标题进行排序...

虽然我对你关于jquery的问题没有答案，但是这里有另一种获取你在此描述的特定行为的方法，在排序后修复了行号。（使用CSS，特别是content property和counter related properties/functions。）

<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兼容，则可以使用tr：before而不是td：first-child：在样本1之前。（Mozilla only supports this in trunk for now...）

在示例2中，您可以看到如何将行号列放在任何位置，而不仅仅是在第一列中。

Answer 4

这会跳过第一列的排序，并允许第二列排序。只需为从第一列开始为零的所有列设置true / false。

<script>
$(document).ready(function() { 
    $("table").tablesorter({
        headers: {
            0: {sorter: false},
            1: {sorter: true},
            3: {sorter: false}
        }//headers
    }); 
});            
</script>

Answer 5

$("table").tablesorter({
    headers: {4: {sorter: false},8: {sorter: false}}
});

Answer 6

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']
    });
});

Answer 7

槽糕。从tablesorter的重组表的方法来看，我很确定这不是完全可能的。 Tablesorter将每个tr逐个拉出DOM并根据索引字段对它们进行排序，重新插入整个tr而不以任何方式更改tr的内容。然后，您所请求的解决方案需要在每次排序后重复遍历表并重新枚举第一列。 Tablesorter确实有一个插件方法，由zebrastripe和其他扩展使用。也许这可以用来挂钩排序方法？

Answer 8

Stobor的答案是完美的。唯一的问题是需要等到表完全呈现以放置数字。

一些观察结果：

您需要为此方法提供一个空列的数字。
如果表格中有标题，则必须使用标签THEAD和TBODY让tablesorter仅对TBODY部分中的数据进行排序。
如果您的表格中有一个页脚，则必须将其从TBODY部分中删除，以避免使用标签来对其内容进行排序，同时您必须使用标签TH而不是TD来避免对页脚进行编号。

注意： Abdul显示的方法仅限制用户按指示的列进行排序，但是当选择其他非限制列的订单时，他的内容始终与行的其余部分一起排序。

Answer 9

只是对这个问题的更新。虽然投票最高的答案是一个很好的解决方案，但 jstablesorter 团队添加了此功能，因此在您的 html 单元格中添加以下属性：

data-sorter="false"

这是一种禁止任何标题进行排序的无缝方式。

使用jQuery tablesorter排除列的排序

9 个答案: