![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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();
});
}
});
});
});