js 点击表头进行排序

示例图如下，点击技能ID时进行正反排序

 

 

 

html代码如下：

<thead>
	<tr class="text-c">
		<th width="25"><input type="checkbox" name="" value=""></th>
		<th width="80" num='1' onclick="clickTr(this,1)">技能ID</th>
		<th width="80" num='1' onclick="clickTr(this,2)">用户ID</th>
		<th width="80">发布时间</th>
		<th width="80" class="AgeOrTime">年龄</th>
		<th width="120" class="SkillOrNeed">技能种类</th>
		<th width="75">服务方式</th>
		<th width="60">服务价格</th>
		<th width="120">状态</th>
	</tr>
</thead>

js代码如下：

//根据数组中object的某一项属性重排序(比较函数)
function objectResort(propertyName,a){
	return function(obj1,obj2){
		var val1=obj1[propertyName];
		var val2=obj2[propertyName];
		if(val1<val2){
			return -a;
		}else if(val1>val2){
			return a;
		}else {
			return 0;
		}
	}
}

//点击表头进行排序
//obj是表头元素，line是第几列
function clickTr(obj,line){
	var length=$('tbody tr').length;
	var arr=[];
	var str='';//表格内容字符串
    var arrString='';
	var num=parseInt($(obj).attr('num'));//表头参数，决定正序还是反序
	for(var i=0;i<length;i++){
		arr[i]={};
		arr[i].sort=parseInt($('tbody tr').eq(i).find('td').eq(line).text());//获取重排序的比较项
        arrString=$('tbody tr').eq(i).clone();//克隆表格行
        arrString=arrString.wrap('<div></div>');//包裹元素
        arr[i].string=arrString.parent().html();//获取表格行结构字符串
	};
	arr.sort(objectResort('sort',-num));
	$(obj).attr('num',-num);
	for(var j=0;j<arr.length;j++){
		str+=arr[j].string;
	};
	$('.table tbody').html(str);
}