不使用jQuery表排序程序对列进行排序
不使用jQuery表排序程序对列进行排序
提问于 2009-01-12 22:37:00
我正在寻找一种方法，可以使用jQuery的表排序插件来排除单个列的排序。具体地说，我有一个相当大的表，并希望保持“行号”列的固定，以便在排序后很容易看到特定行在表中的位置。
例如：
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana在名称列上进行排序时，结果应为：
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry谢谢。
回答 8
Stack Overflow用户
回答已采纳
发布于 2009-01-12 23:12:51
这是一个你可以使用的小部件，它将完成你正在寻找的东西：
$(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']
});
});Stack Overflow用户
发布于 2012-10-17 07:41:34
对于那些在寻找一种方法将列排除在可排序之外(即列上的可单击标题)的人来说，下面的示例排除了列4(零索引)的排序：
$("table").tablesorter({
headers: {4: {sorter: false}}
});Stack Overflow用户
发布于 2009-01-13 00:18:32
编辑:我在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>如果您的浏览器与CSSS2.1完全兼容，则可以在示例1中使用tr:before而不是td:first-child:before。(Mozilla only supports this in trunk for now...)
在示例2中，您可以看到如何将行号列放置在任何位置，而不仅仅是第一列。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/437290
复制相关文章
相似问题