插件下载地址
链接：https://pan.baidu.com/s/1Zxubx4RUp7IQMxIIzcWmEQ 密码：tspk
//Author : 发飙的蜗牛-长期高价宠姐姐
//Date : 2017-09-10
//Explain : 使Table可以点击排序.
/*使用说明 :
方法1:
new TableSorter("tb1");
效果:
id为tb1的table的第一行任意单元格都可以点击进行排序.
方法2:
new TableSorter("tb1", 0, 1, 3);
效果:
id为tb1的table的第一行0,1,3单元格可以进行点击排序.
*/
//table排序页面需要添加这两个样式，升序图片和降序图片
//.SortDescCss {
// background-image: url(img/Desc.gif);
// background-repeat: no-repeat;
// background-position: center center;
//}
//.SortAscCss {
// background-image: url(img/Asc.gif);
// background-repeat: no-repeat;
// background-position: center center;
//}
function TableSorter(table){
this.Table = this.$(table);//获取闯过来的table数据，this.$()获取
if(this.Table.rows.length <= 1){
return;
}
var args = [];//第几列可用，存数组
if(arguments.length > 1){
//arguments为调用这个方法参数的数组，arguments["table名字","第几列可用"]
for(var x = 1; x < arguments.length; x++){
args.push(arguments[x]);
}
}
this.Init(args);
}
TableSorter.prototype = {
$ : function(element){
return document.getElementById(element);
},
//初始化表格的信息和操作
Init : function(args){
this.Rows = [];//table所有的行
this.Header = [];//table所有的头
this.ViewState = [];
this.LastSorted = null;
this.NormalCss = "NormalCss";//正常状态
this.SortAscCss = "SortAscCss";//升序状态
this.SortDescCss = "SortDescCss";//降序状态
for(var x = 0; x < this.Table.rows.length; x++)
{
this.Rows.push(this.Table.rows[x]);
}
//shift()获取第一个数据，这个数据从原数据中删除，返回第一个数据
this.Header = this.Rows.shift().cells;
//判断是否指定排序列，不然全部可以排序。循环出来
for(var x = 0; x < (args.length ? args.length : this.Header.length); x++)
{
//指定 不指定
var rowIndex = args.length ? args[x] : x;
//列的index是否大于头部列 的长度
if(rowIndex >= this.Header.length)
{
continue;
}
this.ViewState[rowIndex] = false;//每一个列是否排序
this.Header[rowIndex].style.cursor = "pointer";//鼠标经过的时候鼠标状态
//鼠标点击列头的时候
this.Header[rowIndex].onclick = this.GetFunction(this, "Sort", rowIndex);
}
},
//取得指定对象的指定方法.
GetFunction : function(variable,method,param){
return function(){
variable[method](param);
}
},
//点击列头的时候排序
Sort : function(column){
//当前排序列有的话，更改class名字以便清除样式。
if(this.LastSorted){
this.LastSorted.className = this.NormalCss;
}
//判断是否数字类型
var SortAsNumber = true;
for(var x = 0; x < this.Rows.length && SortAsNumber; x++){
SortAsNumber = this.IsNumeric(this.Rows[x].cells[column].innerHTML);
}
var _this = this
//理解为table中的每一行重新排序
this.Rows.sort(function(row1, row2){
// row1当前行tr和row2下一行的比较
var result;
var value1,value2;
value1 = row1.cells[column].innerHTML;
value2 = row2.cells[column].innerHTML;
//如果值相等
if(value1 == value2){
return 0;
}
//如果是数字类型的比较
if(SortAsNumber){
result = parseFloat(value1) > parseFloat(value2);
}else{
//字符串类型的比较
result = _this.SortLikeWin(value1,value2)
result = result > 0 ? true : false
}
result = result ? 1 : -1;
return result;
})
//ViewState[]，所有列的排序状态，默认都为false。点击的那个变为true
if(this.ViewState[column]){//如果是排序状态
this.Rows.reverse();
this.ViewState[column] = false;
this.Header[column].className = this.SortDescCss;
}else{//不是排序状态，点击的时候
this.ViewState[column] = true;
this.Header[column].className = this.SortAscCss;
}
//当前排序列
this.LastSorted = this.Header[column];
var frag = document.createDocumentFragment();
for(var x = 0; x < this.Rows.length; x++){
frag.appendChild(this.Rows[x]);
}
this.Table.tBodies[0].appendChild(frag);
this.OnSorted(this.Header[column], this.ViewState[column],column);
},
IsNumeric : function(num){//验证是否是数字类型.
return /^\d+(\.\d+)?$/.test(num);
},
OnSorted : function(cell, IsAsc,column){
//排序完后执行的方法.cell:执行排序列的表头单元格,IsAsc:是否为升序排序.
clickHerderIndex = column
return;
},
//如果是字符串，根据字符串和数字来排序
SortLikeWin:function(v1, v2){
var a = v1;
var b = v2;
var reg = /[0-9]+/g;
var lista = a.match(reg);
var listb = b.match(reg);
if (!lista || !listb) {
return a.localeCompare(b);
}
for (var i = 0,
minLen = Math.min(lista.length, listb.length); i < minLen; i++) {
//数字所在位置序号
var indexa = a.indexOf(lista[i]);
var indexb = b.indexOf(listb[i]);
//数字前面的前缀
var prefixa = a.substring(0, indexa);
var prefixb = a.substring(0, indexb);
//数字的string
var stra = lista[i];
var strb = listb[i];
//数字的值
var numa = parseInt(stra);
var numb = parseInt(strb);
//如果数字的序号不等或前缀不等，属于前缀不同的情况，直接比较
if (indexa != indexb || prefixa != prefixb) {
return a.localeCompare(b);
} else {
//数字的string全等
if (stra === strb) {
//如果是最后一个数字，比较数字的后缀
if (i == minLen - 1) {
return a.substring(indexa).localeCompare(b.substring(indexb));
}
//如果不是最后一个数字，则循环跳转到下一个数字，并去掉前面相同的部分
else {
a = a.substring(indexa + stra.length);
b = b.substring(indexa + stra.length);
}
}
//如果数字的string不全等，但值相等
else if (numa == numb) {
//直接比较数字前缀0的个数，多的更小
return strb.lastIndexOf(numb + '') - stra.lastIndexOf(numa + '');
} else {
//如果数字不等，直接比较数字大小
return numa - numb;
}
}
}
}
}