javascript前端报表排序
日期：2014-05-16 浏览次数：20468 次
javascript前端表格排序
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>run horse example</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.sort-char,.sort-numeric,.sort-date {background-color:#D8D5D3;}
.odd {background-color:#FFFF99;}
.even {background-color:#CC99FF;}
.sorted {background-color:#94FA99;}
table {border-collapse:collapse;}
</style>
<script language="JavaScript1.2">
$.fn.alternateRowColors = function() {
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
};
$(document).ready(function(){
var alternateRowColors = function($table) {
$('tbody tr:odd', $table).removeClass('even').addClass('odd');
$('tbody tr:even', $table).removeClass('odd').addClass('even');
};
$('table.sortable').each(function(){
var $table = $(this);
alternateRowColors($table);
$('th',$table).each(function(column){
var findSortKey;
if($(this).is('.sort-char')){//按字符排序
findSortKey = function($cell) {
return $cell.find('.sort-key').text().toUpperCase()+ ' ' +$cell.text().toUpperCase();
};
}
else if($(this).is('.sort-numeric')) {//按数值排序(价格等)
findSortKey = function($cell) {
var key = parseFloat($cell.text().replace(/^[^\d.]*/,''));
return isNaN(key) ? 0 : key;
};
}
else if($(this).is('.sort-date')) {//按日期排序
findSortKey = function($cell) {
return Date.parse('1 '+$cell.text());
};
}
if(findSortKey) {
$(this).addClass('clickable').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
}).click(function(){
var newDirection = 1;//为了使表格既能升序排又能降序排
if($(this).is('.sorted-asc')){
newDirection = -1;
}
var rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
rows.sort(function(a, b){
if(a.sortKey < b.sortKey) return -newDirection;
if(a.sortKey > b.sortKey) return newDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
var $sortHead = $table.find('th').filter(':nth-child('+(column+1)+')');
if(newDirection == 1) {
$sortHead.addClass('sorted-asc');
}else {
$sortHead.addClass('sorted-desc');
}
//突出显示排序后的列（换个背景颜色）
$table.find('td').removeClass('sorted').filter(':nth-child('+(column+1)+')').addClass('sorted');
$table.alternateRowColors($table);
});
}
});
});
});
</script>
</head>
<body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center>
<TABLE class="sortable" id="my-data" border=1 bordercolor="#FF8000" cellpadding=2>
<thead>
<TR>
<Th class="sort-char">Name</Th>
<Th class="sort-numeric">Age</Th>
<Th class="sort-numeric">QQ</Th>
<Th class="sort-numeric">Tel</Th>
<Th class="sort-char">Email</Th>
<Th class="sort-date">Date</Th>
<Th class="sort-numeric">Price</Th>
</TR>
</thead>
<tbody>
<TR>
<TD>Tom</TD>
<TD>23</TD>
<TD>458712</TD>
<TD>13075621819</TD>
<TD>glenn@zhouzhipeng.com</TD>
<TD>Jun 2010</TD&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
