表格排序
比tablesorter功能少 但灵活 可以根据实际需求做调整
本来用tablesorter做需求 但改的太费劲了 自己做了一个
<head>中添加
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="print, projection, screen" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="tableOrder.js"></script>
</head>
表格形式 每行的 <td style="display: none">1</td> 是用来还原本来顺序的
<table id="table1" width="100%">
<thead>
<tr>
<th style="display: none">
</th>
<th id="t1h1">
表1-排序1
</th>
<th id="t1h2">
表1-排序2
</th>
<th id="t1h3">
表1-排序3
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: none">
1
</td>
<td>
200
</td>
<td>
300
</td>
<td>
500
</td>
</tr>
<tr>
<td style="display: none">
2
</td>
<td>
100
</td>
<td>
400
</td>
<td>
200
</td>
</tr>
<tr>
<td style="display: none">
3
</td>
<td>
100
</td>
<td>
600
</td>
<td>
800
</td>
</tr>
<tr>
<td style="display: none">
4
</td>
<td>
300
</td>
<td>
500
</td>
<td>
100
</td>
</tr>
</tbody>
</table>
合并的表头也可以
<thead>
<tr>
<th style="display: none">
</th>
<th colspan="2">
<table style=" width:100%">
<tr>
<td id="Td1" colspan="2">
头部
</td>
</tr>
<tr>
<td id="t2h1">
表2-排序1
</td>
<td id="t2h2">
表2-排序2
</td>
</tr>
</table>
</th>
<th id="t2h3">
表2-排序3
</th>
</tr>
</thead>
js添加
var openOrder; //所有功能总开关
var tablearr = ["table1"]; //注册的表id
var thidarr = [["t1h1", "t1h2", "t1h3"]]; //被注册表中的激发排序的列id
var tdarr = [[1, 2, 3]]; //对应激发列顺序的排序列号(不从0开始 1就是1列)
var thclass0 = "header"; //正常列的样式名
var thclass1 = "headerSortUp"; //1次排序列的样式名
var thclass2 = "header"; //2次排序列的样式名 与thclass0名一样则取消2次排序(headerSortDown)
var orderFs1 = 1; //1次排 方式 0原序, 1倒序, 2正序
var orderFs2 = 0; //2次排 取消2次排序则为正常列方式 0原序, 1倒序, 2正序
var h_i_d = ["hidden"]; //input-hidden的id 刷新页面时 记录排序状态(页面要写对应id的hidden) 不赋值则关闭记录功能
/*可选函数
//a-排序的表id, b-被点击列id, c-排a表中的第c列
自定义函数用这3个参数做文章
//还原排序时自定义函数
function x_x_x(a,b,c) {
....
}
//1排序时自定义函数
function y_y_y(a,b,c) {
.....
}
//2排序时自定义函数
function z_z_z(a,b,c) {
......
}
//排序依据string处理函数
s-是排序列td中的innerText 处理后返回s 后面依据返回的s排序
function g_g_g(s) {
return s;
}
*/
第一次点击 被点元素class变thclass1 激发tdarr中对应列号 按orderFs1方式排序
第二次点击 被点元素class变thclass2 激发tdarr中对应列号 按orderFs2方式排序
再点来回反复 此中情况可以不加<td style="display: none">1</td>隐藏列
但不加的话tdarr中从0算对应列
如果thclass0与thclass2相同 第一列要<td style="display: none">1</td>隐藏列
那么第二次点击 被点元素class变thclass0(thclass2) 激发隐藏列 0号列 按orderFs2方式排序
就可以还原了
内有2个例子
下载连接: 自制js表格排序
