表格排序
比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=" 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表格排序