table的排序


<script type="text/javascript">

  //转换类型,v为值,dataType为类型
   function convert(v,dataType){
	   switch(dataType){
	   case "int":
		   return parseInt(v);
	   case "float":
		   return parseFloat(v);
	   case "date":
		   return (new Date(Date.parse(v)));
	   default:
		   return v.toString();
	   }    
   }
  //排序函数,index为列号,dataType为数据类型
  function myCompare(index,dataType){
	  if(dataType=="String"){
		     return function compare(a,b){
		    	 var str1=convert(a.cells[index].innerHTML,dataType);
		    	 var str2=convert(b.cells[index].innerHTML,dataType);
		    	 return str1.localeCompare(str2);
		     };
	  }else{
		     return function compare(a,b){
		    	 var str1=convert(a.cells[index].innerHTML,dataType);
		    	 var str2=convert(b.cells[index].innerHTML,dataType);
		    	 if(str1>str2){
		    		 return 1;
		    	 }else if(str1<str2){
		    		 return -1;
		    	 }else{
		    		 return 0;
		    	 }
		     };
	  }
  }
  //全局变量记录当前排序index;
   var currentCol=-1;
  //排序
  function sortTable(tableID,index,dataType){
	  var _tab=$("#"+tableID);
	  var  _tbody=_tab.find("tbody")[0];//获取tbody
	  var _newRows=_tbody.rows;//获取tbody中所有行
	  var arr=new Array();//用户存放tbody所有行
	  //通过循环将所有行放进数组
	  for(var i=0;i<_newRows.length;i++){
		  arr.push(_newRows[i]);
	  }
	//判断最后一次排序的列是否与现在要进行排序的列相同,如果是就反序排列 
	  if(currentCol==index){
		  arr.reverse();
	  }else{
		  arr.sort(myCompare(index,dataType));
	  }
	  //创建文档碎片
	  var oFragment=document.createDocumentFragment();
	  for(var i=0;i<arr.length;i++){
		  if(i%2==0){
			  arr[i].style.background="#00FFFF";
			  oFragment.appendChild(arr[i]);
		  }else{
			  arr[i].style.background="#00FF00";
			  oFragment.appendChild(arr[i]);
		  }
	  }
	  _tbody.appendChild(oFragment);
	  currentCol=index;
  }
  
  //此处是调用,需要更加完善...
$(function(){
	var tableID="sorttable";
	$("#sorttable").find("thead").find("tr").find("td").each(function(index,o){
	       if(index==1){
	    	   o.click(sortTable(tableID,index,"String"));
	       }else{
	    	   o.click(sortTable(tableID,index,"float"));
	       }
	});
});
	
</script>

你可能感兴趣的:(table)