这次给大家带来实现带分组数据table表头排序功能，实现带分组数据table表头排序功能的注意事项有哪些，下面就是实战案例，一起来看一下。
如下图：
要求：点击表头排序时，分组及分组明细的数据层次关系不变
从网上找了一段常规的table排序，改了改，以满足“分组支持”，贴在这里备份
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style type="text/css">
.tbl-list, .tbl-list td, .tbl-list th {
border: solid 1px #000;
border-collapse: collapse;
padding: 10px;
margin: 15px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<title>table sort</title>
<script type="text/javascript">
//排序 tableid: 表的id,icol:第几列 ；datatype：icol对应的列显示数据的数据类型
function sortable(th, tableid, icol, datatype) {
var ascchar = ▲;
var descchar = ▼;
var table = document.getelementbyid(tableid);
//排序标题加背景色
for (var t = 0; t < table.thead.rows[0].cells.length; t++) {
var th = $(table.thead.rows[0].cells[t]);
var thtext = th.html().replace(ascchar, "").replace(descchar, "");
if (t == icol) {
th.css("background-color", "#ccc");
}
else {
th.css("background-color", "#fff");
th.html(thtext);
}
}
var tbody = table.tbodies[0];
var colrows = tbody.rows;
var atrs = new array;
//将得到的行放入数组，备用
for (var i = 0; i < colrows.length; i++) {
//注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
//if ($(colrows[i]).attr("group") != undefined) {
atrs.push(colrows[i]);
//}
}
//判断上一次排列的列和现在需要排列的是否同一个。
var thcol = $(table.thead.rows[0].cells[icol]);
if (table.sortcol == icol) {
atrs.reverse();
} else {
//如果不是同一列，使用数组的sort方法，传进排序函数
atrs.sort(compareele(icol, datatype));
}
var ofragment = document.createdocumentfragment();
for (var i = 0; i < atrs.length; i++) {
ofragment.appendchild(atrs[i]);
}
tbody.appendchild(ofragment);
//记录最后一次排序的列索引
table.sortcol = icol;
//给排序标题加“升序、降序” 小图标显示
var th = $(table.thead.rows[0].cells[icol]);
if (th.html().indexof(ascchar) == -1 && th.html().indexof(descchar) == -1) {
th.html(th.html() + ascchar);
}
else if (th.html().indexof(ascchar) != -1) {
th.html(th.html().replace(ascchar, descchar));
}
else if (th.html().indexof(descchar) != -1) {
th.html(th.html().replace(descchar, ascchar));
}
//重新整理分组
var subrows = $("#" + tableid + " tr[parent]");
for (var t = subrows.length - 1; t >= 0 ; t--) {
var parent = $(# + tableid + tr[group=' + $(subrows[t]).attr(parent) + ']);
parent.after($(subrows[t]));
}
}
//将列的类型转化成相应的可以排列的数据类型
function convert(svalue, datatype) {
switch (datatype) {
case int:
return parseint(svalue, 10);
case float:
return parsefloat(svalue);
case date:
return new date(date.parse(svalue));
case string:
default:
return svalue.tostring();
}
}
//排序函数，icol表示列索引，datatype表示该列的数据类型
function compareele(icol, datatype) {
return function (otr1, otr2) {
var vvalue1 = convert(removehtmltag($(otr1.cells[icol]).html()), datatype);
var vvalue2 = convert(removehtmltag($(otr2.cells[icol]).html()), datatype);
if (vvalue1 < vvalue2) {
return -1;
}
else {
return 1;
}
};
}
//去掉html标签
function removehtmltag(html) {
return html.replace(/<[^>]+>/g, );
}
//jquery加载完以后，分组行高亮背景，分组明细隐藏
$(document).ready(function () {
$(tr[group]).css(background-color, #ff9);
$(tr[parent]).hide();
});
//点击分组行时，切换分组明细的显示/隐藏
function showsub(a) {
var groupvalue = $(a).parent().parent().attr(group);
var subdetails = $(tr[parent=' + groupvalue + ']);
subdetails.toggle();
}
</script>
</head>
<body>
<table id="tableid" class="tbl-list" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th onclick="sortable(this,'tableid', 1,'string')"
style="cursor:pointer">姓名</th>
<th onclick="sortable(this,'tableid', 2, 'date')"
style="cursor:pointer">生日</th>
<th onclick="sortable(this,'tableid', 3, 'int')"
style="cursor:pointer">年龄</th>
<th onclick="sortable(this,'tableid', 4, 'float')"
style="cursor:pointer">工资</th>
</tr>
</thead>
<tbody>
<tr group="a">
<td>1</td>
<td><a href="#" onclick="showsub(this)">group-a</a></td>
<td>01/12/1982</td>
<td>25</td>
<td>1000.50</td>
</tr>
<tr parent="a">
<td>2</td>
<td>a-01</td>
<td>01/09/1982</td>
<td>25</td>
<td>2000.10</td>
</tr>
<tr parent="a">
<td>3</td>
<td>a-02</td>
<td>01/10/1982</td>
<td>26</td>
<td>2000.20</td>
</tr>
<tr group="b">
<td>4</td>
<td><a href="#" onclick="showsub(this)">group-b</a></td>
<td>10/14/1999</td>
<td>18</td>
<td>1000.20</td>
</tr>
<tr parent="b">
<td>5</td>
<td>b-01</td>
<td>02/12/1982</td>
<td>19</td>
<td>3000.20</td>
</tr>
<tr parent="b">
<td>6</td>
<td>b-02</td>
<td>03/12/1982</td>
<td>20</td>
<td>3000.30</td>
</tr>
<tr group="c">
<td>7</td>
<td><a href="#" onclick="showsub(this)">group-c</a></td>
<td>10/14/1980</td>
<td>8</td>
<td>1000.30</td>
</tr>
<tr parent="c">
<td>8</td>
<td>c-01</td>
<td>03/12/1981</td>
<td>17</td>
<td>3100.30</td>
</tr>
</tbody>
</table>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery仿支付宝首页焦点图效果
js点击小图片关联显示大图片
以上就是实现带分组数据table表头排序功能的详细内容。