$(function() {
// jQuery.fn.alternateRowColors = function() { //做成插件的形式
// $("#sale tbody tr:odd").removeClass('even').addClass("odd");
// $("#sale tbody tr:even").removeClass('odd').addClass("even"); //隔行变色 偶数行
// return this;
// };
Kin_Tables(false,0,1,false,false,false,false);
$('table.ruler').each(function() {
var $table = $(this); //将table存储为一个jquery对象
// $table.alternateRowColors($table); //在排序时隔行变色
$('th', $table).each(function(column) {
var findSortKey;
if ($(this).is('.sort-alpha')) { //按字母排序
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');
}
//移除已排序的列的样式,添加样式到当前列
Kin_Tables(false,0,1,false,false,false,false);
});
}
});
});
});
//样式的设置
function Kin_Tables(Kin_Table_GetTableMethod, //get your table
Kin_Table_Header_Offset, //set the table header offset
Kin_Table_Footer_Offset, //set the table footer offset
Kin_Table_Odd_Style, // set the table odd row style name (Default:odd)
Kin_Table_Even_Style, // set the table even row style name (Default:even)
Kin_Table_Hover_Style, // set the table mouseover row style name (Default:over)
Kin_Table_Click_Style // set the table odd row style name (Default:clicked)
){
$(function(){
var Kin_Table_Config = [];
Kin_Table_Config.GetTableMethod = (Kin_Table_GetTableMethod ? Kin_Table_GetTableMethod : "#sale"); //得到Table的方法 同$() 必选
Kin_Table_Config.Header_Offset = (!isNaN(Kin_Table_Header_Offset) ? Kin_Table_Header_Offset : 0); //从前起忽略多少行 可选参数
Kin_Table_Config.Footer_Offset = (!isNaN(Kin_Table_Footer_Offset) ? Kin_Table_Footer_Offset : 0); //从后起忽略多少行 可选参数
Kin_Table_Config.Odd_Style = (Kin_Table_Odd_Style ? Kin_Table_Odd_Style : "odd"); //奇数行样式 可选参数
Kin_Table_Config.Even_Style = (Kin_Table_Even_Style ? Kin_Table_Even_Style : "even"); //偶数行样式 可选参数
Kin_Table_Config.Hover_Style = (Kin_Table_Hover_Style ? Kin_Table_Hover_Style : "over"); //鼠标悬停样式 可选参数
Kin_Table_Config.Click_Style = (Kin_Table_Click_Style ? Kin_Table_Click_Style : "over"); //鼠标点击样式 可选参数
//alert(Kin_Table_Config.Odd_Style);
//alert(Kin_Table_Config.Even_Style);
//alert(Kin_Table_Config.Hover_Style);
//alert(Kin_Table_Config.Click_Style);
//alert(Kin_Table_Config.GetTableMethod);
// var Kin_Table = $(Kin_Table_Config.GetTableMethod+" tr:nth-child(n+"+eval(Kin_Table_Config.Header_Offset+1)+")"); //Old Method
var Kin_Table = $(Kin_Table_Config.GetTableMethod + " tr").slice(Kin_Table_Config.Header_Offset,-Kin_Table_Config.Footer_Offset); //New Method
Kin_Table.each(function(i, row){
var Kin_Table_Row_Checkbox = $(row).find(":checkbox");
var bChecked = false;
//先移除所有的样式,在重新添加样式
$(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Even_Style : Kin_Table_Config.Odd_Style);
$(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
$(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
$(row).hover(function(){
$(this).addClass(Kin_Table_Config.Hover_Style); //鼠标悬停给样式
$(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
}, function(){
//在排序有会有样式错误,先删除所有的样式,在重新分配奇偶行的样式
$(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Even_Style : Kin_Table_Config.Odd_Style);
$(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
$(this).removeClass(Kin_Table_Config.Hover_Style); //鼠标移开时给样式并重新分配奇偶行的样式
$(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
});
$(row).click(function(){
$(this).toggleClass(Kin_Table_Config.Click_Style);
Kin_Table_Row_Checkbox.each(function(){
this.checked = $(row).hasClass(Kin_Table_Config.Click_Style);
});
});
Kin_Table_Row_Checkbox.each(function(){
if (this.checked) {
bChecked = true;
return false;
}
});
//复选框样式
if (bChecked) {
$(row).addClass(Kin_Table_Config.Click_Style);
Kin_Table_Row_Checkbox.each(function(){
this.checked = true;
});
}
else {
$(row).removeClass(Kin_Table_Config.Click_Style);
}
});
});
}
注:给需要操作的表格id="sale"
在进行页面排序的时候,要给<TH>标签加上class="sort-numeric" 根据数字排序,如需其他方式排序,看上面代码相应的值
务必给table加上<thead><tbody><tfooter>