借助于强大的jquery库,通过一些简单的js代码来实现对table数据列进行排序。排序是通过调整table的tr的顺序重新显示,全部在客户端上完成,不需要和服务器交互,因此减轻了服务器的压力。
实现排序的js代码如下:
//点击表格的列进行排序
function tableSort(jqTableObj) {
jqTableObj.find('tr th').click(
function(){
var dataType = $(this).attr('dataType') || 'text';
var index = jqTableObj.find('thead th').index(this) + 1;
var arr = [];
var row = jqTableObj.find('tbody tr');
$.each(row, function(i){arr[i] = row[i]});
if($(this).hasClass('current')){
arr.reverse();
} else {
arr.sort(Utils.sortStr(index, dataType))
jqTableObj.find('thead th').removeClass('current');
$(this).addClass('current');
}
var fragment = document.createDocumentFragment();
$.each(arr, function(i){
fragment.appendChild(arr[i]);
});
jqTableObj.find('tbody').append(fragment);
}
);
var Utils = (function() {
function sortStr(index, dataType){
return function(a, b){
var aText=$(a).find('td:nth-child(' + index + ')').attr('_order') || $(a).find('td:nth-child(' + index + ')').text();
var bText=$(b).find('td:nth-child(' + index + ')').attr('_order') || $(b).find('td:nth-child(' + index + ')').text();
if(dataType != 'text'){
aText=parseNonText(aText, dataType);
bText=parseNonText(bText, dataType);
return aText > bText ? -1 : bText > aText ? 1 : 0;
} else {
return aText.localeCompare(bText)
}
}
}
要想让上面的代码工作,需要在原有的table中注意几点。
1、表头的tr其父元素为thead,另外表头列使用th,同时要使用dataType属性名来标示数据的类型,类型可以为text(默认),int和float;
2、显示table数据的tr父元素为tbody,显示数据的列用td,可以使用_order属性指定该字段的真实值。
table 示例如下:
function parseNonText(data, dataType){
switch(dataType){
case 'int':
return parseInt(data) || 0
case 'float':
return parseFloat(data) || 0
default :
return filterStr(data)
}
}