代码之家 › 专栏 › 技术社区 › Chad Birch

使用jQuery tablesorter从排序中排除列

tablesorter jquery

Chad Birch · 技术社区 · 15 年前

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

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

在“名称”列上排序时,应导致:

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

谢谢

8 回复 | 直到 15 年前

bcoughlan 12 年前

对于那些在寻找将列排除在可排序范围之外(即列上的可单击标题)的方法时发现此问题的人,下面的示例将列4(零索引)排除在排序范围之外:

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

Budda 10 年前

以下是一个小部件,您可以使用它来完成所需的工作:

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

});

Stobor 14 年前

编辑:我在 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完全兼容,则可以在示例1中使用tr:before而不是td:first child:before。( Mozilla only supports this in trunk for now... )

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

ABDUL JAMAL 8 年前

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

Ashley Medway Karthi 10 年前

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

Hubert 8 年前

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

Ry Biesemeyer 15 年前

Jorge 8 年前

斯托博尔的答案是完美的。唯一的问题是需要等到表完全呈现后才能输入数字。

一些意见:

如果表中有标题,则必须使用标记THEAD和TBODY让tablesorter仅对TBODY部分中的数据进行排序。

注: Abdul显示的方法仅限制用户按指定列排序,但当选择按其他非限制列排序时,其内容始终与行的其余部分一起排序。

ArabianMaiden 3 年前

这只是一个关于这个问题的更新。虽然排名靠前的答案是一个很好的解决方案,但jstablesorter团队添加了此功能,因此在html单元格中添加以下属性:

data-sorter="false"

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