Cha*_*rch 16 jquery tablesorter
我正在寻找一种方法来排除使用jQuery的tablesorter插件排序单个列.具体来说,我有一个相当大的表,并希望保持一个"行号"列固定,以便在排序后很容易看到表中特定行的位置.
例如:
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
在name列上排序时,应该导致:
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
谢谢.
bco*_*lan 30
对于那些在寻找排除列可排序的方法(即列上的可点击标题)时发现这种情况的人,下面的示例排除第4列(零索引)被排序):
$("table").tablesorter({
headers: {4: {sorter: false}}
});
Bri*_*her 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']
});
});
编辑：我在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}}
});
| 归档时间： |
|
| 查看次数： |
16096 次 |
| 最近记录： |