TableSort.js表格排序插件使用方法详解
程序员文章站
2022-05-26 23:09:44
本文实例为大家分享了tablesort.js表格排序的具体代码，供大家参考，具体内容如下
本文实例为大家分享了tablesort.js表格排序的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>tablesort</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<table id="sales" summary="summary here">
<caption>
main title
</caption>
<col/>
<col/>
<col/>
<thead>
<tr>
<th class="asc">col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>s2</td>
<td>w3</td>
</tr>
<tr>
<td>b1</td>
<td>c2</td>
<td>v3</td>
</tr>
<tr>
<td>c1</td>
<td>x2</td>
<td>k3</td>
</tr>
</tbody>
<!-- tfoot><tr><td cols=3 >other description</td></tr></tfoot -->
</table>
<button onclick="fn()">test</button>
<script language="javascript">
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');
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。