jquery实现表格本地排序的方法
本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>jquery表格排序</title>
<styletype="text/css">
thead
{
background-color:Blue;
color:White;
}
tr.odd
{
background-color:#ddd;
}
tr.even
{
background-color:#eee;
}
.clickable
{
text-decoration:underline;
}
.hover
{
background-color:#5dd354;
}
.sorted
{
background-color:#ded070;
}
.page-number
{
color:Black;
margin:2px10px;
padding:2px5px;
}
.active
{
border:solid1pxred;
background-color:#76a7d2;
}
.pager
{
margin-bottom:10px;
margin-left:20px;
}
</style>
<scripttype="text/javascript"language="javascript"src="js/jquery1.3.2.js"></script>
<scripttype="text/javascript"language="javascript">
$(function(){
jQuery.fn.alternateRowColors=function(){ //做成插件的形式
$('tbodytr:odd',this).removeClass('even').addClass('odd');//隔行变色奇数行
$('tbodytr:even',this).removeClass('odd').addClass('even');//隔行变色偶数行
returnthis;
};
$('table.myTable').each(function(){
var$table=$(this); //将table存储为一个jquery对象
$table.alternateRowColors($table); //在排序时隔行变色
$('th',$table).each(function(column){
varfindSortKey;
if($(this).is('.sort-alpha')){ //按字母排序
findSortKey=function($cell){
return$cell.find('sort-key').text().toUpperCase()+''+$cell.text().toUpperCase();
};
}elseif($(this).is('.sort-numeric')){ //按数字排序
findSortKey=function($cell){
varkey=parseFloat($cell.text().replace(/^[^\d.]*/,''));
returnisNaN(key)?0:key;
};
}elseif($(this).is('.sort-date')){ //按日期排序
findSortKey=function($cell){
returnDate.parse('1'+$cell.text());
};
}
if(findSortKey){
$(this).addClass('clickable').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');}).click(function(){
//反向排序状态声明
varnewDirection=1;
if($(this).is('.sorted-asc')){
newDirection=-1;
}
varrows=$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)returnnewDirection;
return0;
});
$.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.alternateRowColors($table);
//移除已排序的列的样式,添加样式到当前列
$table.find('td').removeClass('sorted').filter(':nth-child('+(column+1)+')').addClass('sorted');
$table.trigger('repaginate');
});
}
});
});
});
//分页
$(function(){
$('table.paginated').each(function(){
varcurrentPage=0;
varnumPerPage=10;
var$table=$(this);
$table.bind('repaginate',function(){
$table.find('tbodytr').hide().slice(currentPage*numPerPage,(currentPage+1)*numPerPage).show();
});
varnumRows=$table.find('tbodytr').length;
varnumPages=Math.ceil(numRows/numPerPage);
var$pager=$('<divclass="pager"></div>');
for(varpage=0;page<numPages;page++){
$('<spanclass="page-number"></span>').text(page+1)
.bind('click',{newPage:page},function(event){
currentPage=event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table);
$table.trigger('repaginate');
$pager.find('span.page-number:first').addClass('active');
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableclass="myTablepaginated">
<thead>
<tr>
<thclass="sort-alpha">
LastName
</th>
<thclass="sort-alpha">
FirstName
</th>
<th>
Email
</th>
<thclass="sort-numeric">
Due
</th>
<thclass="sort-date">
Date
</th>
<th>
WebSite
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
tmith
</td>
<td>
erthn
</td>
<td>
eth@gmail.com
</td>
<td>
$34.00
</td>
<td>
142009
</td>
<td>
ftp://www.baidu.com
</td>
</tr>
<tr>
<td>
TTmith
</td>
<td>
BJohn
</td>
<td>
jsmith@gmail.com
</td>
<td>
$50.00
</td>
<td>
Mar2009
</td>
<td>
ftp://www.baidu.com
</td>
</tr>
<tr>
<td>
CSmith
</td>
<td>
John
</td>
<td>
DDDD@gmail.com
</td>
<td>
$50.00
</td>
<td>
Mar2009
</td>
<td>
https://www.nhooo.com
</td>
</tr>
<tr>
<td>
Smith
</td>
<td>
John
</td>
<td>
sdsf@gmail.com
</td>
<td>
$50.00
</td>
<td>
f322009
</td>
<td>
ffttp://www.nhooo.com
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。