对表进行排序,但使一列不移动
Sort table but make one column not to move
我想对下面的表进行排序,但同时我不希望编号列移动,相反,当其他列移动时,它应该保持固定。关于我应该怎么做的想法吗
$(document).ready(function() {
$("#myTable").tablesorter({
// pass the headers argument and assing a object
headers: {
// assign the first column not to sort
0: {
// disable it by setting the property sorter to false
sorter: false
},
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">
<thead>
<tr>
<th>#</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>2</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>3</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>4</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>5</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
您可以绑定到sortEnd
事件,只需在第一列中写入新文本。
以下代码利用了
- jQuery的
.text()
接受一个回调函数来计算并返回每个匹配元素的新文本(http://api.jquery.com/text/) - 这个回调函数接收(从零开始的)元素索引作为第一个参数,这样就不需要保留单独的计数器变量
$(function() {
$("#myTable").tablesorter({
headers: {
0: {
sorter: false
},
}
}).on("sortEnd", function () {
$(this).find('tbody td:first-child').text(function (i) {
return i + 1;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">
<thead>
<tr>
<th>#</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>2</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>3</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>4</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>5</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
相关文章:
- 柱状图后面的一列
- 数据表通过分析一列的值对其进行排序
- Datatables-如何在未显示所有列的情况下禁用表中最后一列的排序
- 获取表中每行的一列的内容,然后循环访问每个内容
- 对象数组-与其他列数据相比,增加一列
- 在最初的查询/表格绘制中只提取谷歌电子表格的一列
- jQuery Datatables:单击一列时对另一列进行排序
- 我的砖石图像只显示在一列中
- 删除“;使用javascript从pentaho中的一列中选择“[”
- 使用 Javascript 在一列中更改属性内容
- jquery插件 - 已选择 - 多项选择不在一行中列出,而是列在一列中
- 单击包含按钮的最后一列时获取表的第一列值
- 排除行选择中的最后一列
- 取消表中一列的onclick事件
- 使用滑动手势从一页移动到另一页
- Javascript:在HTML表中,如何从一列中选择部分文本(匹配一些正则表达式),并将其移动到下一列
- 在HTML中,我如何使两列合并为一列用于移动屏幕
- 在jQuery中一次将元素从一列移动到另外两列
- 在jQueryUI可排序的表之间移动一列,包括th
- 对表进行排序,但使一列不移动