The sorting plug-in shared by this author is directly used for list sorting: http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html , the plug-in is really well written, and it is very simple to use. The effect is also good.
The source code is as follows:
//Author : Wolf Robot //Contact : [email protected] //Date : 2008-04-19 //Explain : Make the Table clickable to sort. /*Instructions for use : method 1: new TableSorter("tb1"); Effect: Any cell in the first row of the table with id tb1 can be clicked to sort. Method 2: new TableSorter("tb1", 0, 1, 3); Effect: Cells 0, 1, and 3 in the first row of the table with id tb1 can be sorted by click. */ function TableSorter(table) { this.Table = this.$(table); if(this.Table.rows.length <= 1) { return; } var args = []; if(arguments.length > 1) { for(var x = 1; x < arguments.length; x++) { args.push(arguments[x]); } } this.Init(args); } TableSorter.prototype = { $ : function(element)//简写document.getElementById { return document.getElementById(element); }, Init : function(args)//Initialize table information and operations { this.Rows = []; this.Header = []; 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]); } 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; 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)//Get the specified method of the specified object. { return function() { variable[method](param); } }, Sort : function(column)//Execute sorting. { 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); } this.Rows.sort( function(row1, 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 = value1 > value2; } result = result ? 1 : -1; return result; }) 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]); }, IsNumeric : function(num)//Verify whether it is a numeric type. { return /^\d+(\.\d+)?$/.test(num); }, OnSorted : function(cell, IsAsc)//The method executed after sorting. cell: The header cell of the sorting column, IsAsc: whether it is sorted in ascending order. { return; } }
Because I not only want to sort here, but also according to the countdown time, the closer the time is, the higher the ranking. Modified on the basis of the source code:
1. Return the table object :
function TableSorter(table){
this.Table = this.$(table);
if(this.Table.rows.length <= 1)
{
return;
}
var args = [];
if(arguments.length > 1)
{
for(var x = 1; x < arguments.length; x++)
{
args.push(arguments[x]);
}
}
this.Init(args);
return this;
}
The page defines global variables to receive:
var tableObj = null;
$(function(){
//Add event for sorting
tableObj = new TableSorter(tableName,0,3,5);
});
2. Add a method in the plug-in to modify the original arrangement order , so that it can be modified at any time (the default in the original plug-in is to click the ascending order, and then click the descending order. I am here to order each order in ascending order, because the closer it is The smaller the time, the more it should be ranked first)
//This method is used to manually modify the sorting situation: column: the subscript of the column to be sorted is sort: ascending order, descending order
setViewState:function(column,sort)
{
this.ViewState[column] = sort;
}
3. Call (count down once a minute, and each calculation is considered to be sorted):
var cutDownIndex = 5;//Countdown
var intervalTime = 1*60*1000;//Execute once a minute
var timer = window.setInterval (function () {
sortTable(cutDownIndex,false);//The countdown is always the closest, so it is always in ascending order from small to large
}, intervalTime);
/**
* This method is used to sort
* @param column: which column to sort for
* @param sort: true: descending false: ascending
* */
function sortTable(column,sort){
tableObj.setViewState(column,sort);//Set the sorting method
tableObj.Sort(column);//Sort
}
Later, the business requirements changed: above the row where the countdown function is activated, and below the row where it is not activated, the principle is that the closer the time, the higher the row. So on the basis of the original Sort method, a new method was added:
SortForCutdown : function(column)//Execute sorting: dedicated to the column where the countdown is located
{
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);
}
this.Rows.sort(
function(row1, row2)
{
var result;
var value1, value2;
value1 = row1.cells[column].innerHTML;
value2 = row2.cells[column].innerHTML;
var sign1 = $(row1).attr("sign");//Identity of the first row of data
var sign2 = $(row2).attr("sign");//Identification of the second row of data
//alert(row1.cells[2].innerHTML+"\t"+sign1+"\n"+row2.cells[2].innerHTML+"\t"+sign2);
if((sign1==undefined || sign1=="0") && (sign2==undefined || sign2=="0")){//Indicates that both columns of data are not activated
//alert("None of them started");
if(value1 == value2)return 0;
if(SortAsNumber)result = parseFloat(value1) > parseFloat(value2);
else result = value1 > value2;
result = result ? 1 : -1;
}else{//At least one startup
if(sign1=="1" && (sign2==undefined || sign2=="0")){//The first one is activated, the second is not activated
//alert("The first one started");
return -1;
}else if(sign2=="1" && (sign1==undefined || sign1=="0")){//The second one is activated, the first one is not activated
//alert("The second one started");
return 1;
}else if(sign1=="1" && sign2=="1"){//All are activated, then the size of the ratio
//alert("Both are enabled");
if(value1 == value2)return 0;
if(SortAsNumber)result = parseFloat(value1) > parseFloat(value2);
else result = value1 > value2;
result = result ? 1 : -1;
}
}
return result;
})
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]);
}
When calling, just call the SortForCutdown method. In this way, the manual "click on the countdown column to sort" function can be retained, and it can also be automatically displayed in ascending order according to the countdown rules.
function sortTable(column,sort){
tableObj.setViewState(column,sort);//Set the sorting method
tableObj.SortForCutdown(column);//Sort
}
Finally, good luck to everyone!