js table ajax排序,TableSort.js表格排序插件使用方法详解

代码如下

TableSort

table {

border-collapse: collapse;

width: 300px;

}

table caption {

border-right: 1px solid #abc;

border-left: 1px solid #abc;

border-top: 2px solid #000;

border-bottom: 2px solid #000;

background-color: #afd;

}

#sales tr, #sales td {

border: 1px solid #abc;

text-align: center;

}

Main Title

Col1

Col2

Col3A1

S2

W3

B1

C2

V3

C1

X2

K3

Test

function TableSort(id) {

this.tbl = document.getElementById(id);

this.lastSortedTh = null;

if (this.tbl && this.tbl.nodeName == "TABLE") {

var headings = this.tbl.tHead.rows[0].cells;

for (var i = 0; headings[i]; i++) {

if (headings[i].className.match(/asc|dsc/)) {

this.lastSortedTh = headings[i];

}

}

this.makeSortable();

}

}

TableSort.prototype.makeSortable = function() {

var headings = this.tbl.tHead.rows[0].cells;

for (var i = 0; headings[i]; i++) {

headings[i].cIdx = i;

var a = document.createElement("a");

a.href = "#";

a.innerHTML = headings[i].innerHTML;

a.onclick = function(that) {

return function() {

that.sortCol(this);

return false;

}

}(this);

headings[i].innerHTML = "";

headings[i].appendChild(a);

}

}

TableSort.prototype.sortCol = function(el) {

var rows = this.tbl.rows;

var alpha = [], numeric = [];

var aIdx = 0, nIdx = 0;

var th = el.parentNode;

var cellIndex = th.cIdx;

for (var i = 1; rows[i]; i++) {

var cell = rows[i].cells[cellIndex];

var content = cell.textContent ? cell.textContent : cell.innerText;

var num = content.replace(/(\$|\,|\s)/g, "");

if (parseFloat(num) == num) {

numeric[nIdx++] = {

value : Number(num),

row : rows[i]

}

} else {

alpha[aIdx++] = {

value : content,

row : rows[i]

}

}

}

function bubbleSort(arr, dir) {

var start, end;

if (dir === 1) {

start = 0;

end = arr.length;

} else if (dir === -1) {

start = arr.length - 1;

end = -1;

}

var unsorted = true;

while (unsorted) {

unsorted = false;

for (var i = start; i != end; i = i + dir) {

if (arr[i + dir] && arr[i].value > arr[i + dir].value) {

var temp = arr[i];

arr[i] = arr[i + dir];

arr[i + dir] = temp;

unsorted = true;

}

}

}

return arr;

}

var col = [], top, bottom;

if (th.className.match("asc")) {

top = bubbleSort(alpha, -1);

bottom = bubbleSort(numeric, -1);

th.className = th.className.replace(/asc/, "dsc");

} else {

top = bubbleSort(numeric, 1);

bottom = bubbleSort(alpha, 1);

if (th.className.match("dsc")) {

th.className = th.className.replace(/dsc/, "asc");

} else {

th.className += "asc";

}

}

if (this.lastSortedTh && th != this.lastSortedTh) {

this.lastSortedTh.className = this.lastSortedTh.className.replace(

/dsc|asc/g, "");

}

this.lastSortedTh = th;

col = top.concat(bottom);

var tBody = this.tbl.tBodies[0];

for (var i = 0; col[i]; i++) {

tBody.appendChild(col[i].row);

}

}

function fn() {

var sales = document.getElementById('sales');

var sortTable = new TableSort('sales');

}