![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.fn.alternateRowColors = function(){ //改变颜色的插件
$('tbody tr:odd', this)
.removeClass('even').addClass('odd');
$('tbody tr:even', this)
.removeClass('odd').addClass('even');
};
$(document).ready(function(){
$('table.sortable').each(function(){
var $table = $(this);
$table.alternateRowColors();
$('th', $table).each(function(column){ //遍历表头
var $header = $(this); //遍历的当前表头
var findSortKey;
if ($header.is('.sort-alpha')){
findSortKey = function($cell){
return $cell.find('.sort-key').text().toUpperCase()
+ ' ' + $cell.text().toUpperCase();
};
}
else if ($header.is('.sort-numberic')){
findSortKey = function($cell){
var key = $cell.text().replace(/^[^\d.]*/, '');
key = parseFloat(key);
return isNaN(key) ? 0 : key;
};
}
else if ($header.is('.sort-date')){
findSortKey = function($cell){
return Date.parse('1 ' + $cell.text());
};
}
if (findSortKey){
$header.addClass('clickable').hover(function(){
$header.addClass('hover');
}, function(){
$header.removeClass('hover');
}).click(function(){
var sortDirection = 1;
if ($header.is('.sorted-asc')){
sortDirection = - 1;
}
var rows = $table.find('tbody > tr').get(); //表格行的dom数组
$.each(rows, function(index, row){
var $cell = $(row).children('td').eq(column); //指定列号的单元格
row.sortKey = findSortKey($cell);
});
rows.sort(function(a, b){
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
$.each(rows, function(index, row){
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc')
.removeClass('sorted-desc');
if (sortDirection == 1){
$header.addClass('sorted-asc');
}
else {
$header.addClass('sorted-desc');
}
$table.find('td').removeClass('sorted')
.filter(':nth-child('+(column + 1)+')')
.addClass('sorted');
$table.alternateRowColors();
});
}
});
});
});
$('tbody tr:odd', this)
.removeClass('even').addClass('odd');
$('tbody tr:even', this)
.removeClass('odd').addClass('even');
};
$(document).ready(function(){
$('table.sortable').each(function(){
var $table = $(this);
$table.alternateRowColors();
$('th', $table).each(function(column){ //遍历表头
var $header = $(this); //遍历的当前表头
var findSortKey;
if ($header.is('.sort-alpha')){
findSortKey = function($cell){
return $cell.find('.sort-key').text().toUpperCase()
+ ' ' + $cell.text().toUpperCase();
};
}
else if ($header.is('.sort-numberic')){
findSortKey = function($cell){
var key = $cell.text().replace(/^[^\d.]*/, '');
key = parseFloat(key);
return isNaN(key) ? 0 : key;
};
}
else if ($header.is('.sort-date')){
findSortKey = function($cell){
return Date.parse('1 ' + $cell.text());
};
}
if (findSortKey){
$header.addClass('clickable').hover(function(){
$header.addClass('hover');
}, function(){
$header.removeClass('hover');
}).click(function(){
var sortDirection = 1;
if ($header.is('.sorted-asc')){
sortDirection = - 1;
}
var rows = $table.find('tbody > tr').get(); //表格行的dom数组
$.each(rows, function(index, row){
var $cell = $(row).children('td').eq(column); //指定列号的单元格
row.sortKey = findSortKey($cell);
});
rows.sort(function(a, b){
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
$.each(rows, function(index, row){
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc')
.removeClass('sorted-desc');
if (sortDirection == 1){
$header.addClass('sorted-asc');
}
else {
$header.addClass('sorted-desc');
}
$table.find('td').removeClass('sorted')
.filter(':nth-child('+(column + 1)+')')
.addClass('sorted');
$table.alternateRowColors();
});
}
});
});
});