2009-01-12 129 views
15

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

例如:

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

当排序上的名字一栏,应导致:

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

感谢。

回答

18

这里是一个小部件,你可以使用,将完成你在找什么:

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

}); 
+3

非常好!我认为在for循环中应该有'<=​​'而不是'<'。 – Marcin 2010-03-21 06:50:32

0

Hrm。从tablesorter的重组表格的方法来看,我很确定这不是完全可能的。 Tablesorter逐一跳出DOM,并根据索引字段对它们进行排序,重新插入整个tr,而不以任何方式更改tr的内容。然后,您需要的解决方案需要在每次排序后迭代遍历表并重新枚举第一列。 Tablesorter确实有一个插件方法,供斑马纹和其他扩展使用。也许这可以用来钩住排序方法?

4

编辑:我在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:之前不是TD:第一孩子:之前在样品1(Mozilla only supports this in trunk for now...

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

29

对于那些谁发现这个在寻找一种方式来被排序(即点击列标题)排除一列,下面的示例中不包括第4列(零索引)被排序):

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

这将跳过第一列的排序,并允许第二列排序。对于从第一列开始为零的所有列,只需设置true/false即可。

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

布赖恩费舍尔的答案是正确的,但它在大型表格(在我的例子中是+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'] 
    }); 
}); 
3
$("table").tablesorter({ 
    headers: {4: {sorter: false},8: {sorter: false}} 
}); 
0

Stobor的答案是完美的。唯一的问题是,需要等到桌子完全呈现才能放入数字。

一些观察:

  • 你需要给一个空列这个方法把数字。
  • 如果表中有标题,则必须使用标记THEAD和TBODY让tablesorter仅对TBODY部分中的数据进行排序。
  • 如果您的表格中有一个页脚,您必须将其从TBODY部分中移出以避免tablesorter对其内容进行排序,同时您必须使用标签TH而不是TD来避免对页脚进行计算。

注: 阿卜杜勒所示的方法只限制用户必须通过指定的列进行排序,但在选择其他不受限制的列的顺序他的内容总是与该行的其余部分进行排序。