htmlテーブルヘッダーをマウスでクリックしてテーブルデータのカスタムソートを実現

/**
 *          ，   int（float、string、date）           
 */
//    tableId:   id,iCol:    0   ；dataType：iCol             ，  ：    date
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", "#d2d8de");
			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, "");

}

   
  
  
  
  
    
    
    
      
  
    
   
    
  
  
    
    
  
  






  ：