<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td> <a href="javascript:void(0)">名称</a> / <a href="javascript:void(0)">类型</a></td>
<td><a href="javascript:void(0)">上传时间</a></td>
<td><a href="javascript:void(0)">大小</a></td>
</tr>
</thead>
<tbody>
<tr>
<td _ext="rar">JSCSS</td>
<td _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
<td _order="433247">433247</td>
</tr>
<tr>
<td _ext="htm">AJAX</td>
<td _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
<td _order="11394">11394</td>
</tr>
<tr>
<td _ext="htm">EXT</td>
<td _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
<td _order="351">351</td>
</tr>
<tr>
<td _ext="xml">Index</td>
<td _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
<td _order="14074">14074</td>
</tr>
<tr>
<td _ext="js">ORDER</td>
<td _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
<td _order="2844">2844</td>
</tr>
</tbody>
</table>
<script src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/TableOrder.js" type="text/javascript"></script>
<script type="text/javascript">
TableOrderOper.Init("idTable", 0, {
OnShow: function (i, trJqObj, _tbodyObj) {
trJqObj.attr("class", ((i +1) %2==0?"hoverTr" : ""));
}
});
TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () {
alert("idSize");
} });
</script>
代码中注释我都尽量写的比较清楚了，需要补充说明的是：
1.js使用的是闭包，我强调代码要尽可能的简洁易懂。
2.IsLazyMode属性设置，IsLazyMode=true,适用于当前要排序的表格是不变的，即不会有ajax的增删改行的操作，而且你看代码后就可以看出的一个好处：把要排序列的对应的行对象只一次遍历，并将排序后的行对象数组保存在全局对象中，下次排序时直接通过tdIndex(排序列的索引)取出对应的行对象数组,并将数组反转，即可实现排序的效果，可以在一定程度上提高代码执行效率(性能); IsLazyMode=false, 即适用于当前要排序的表格会改变，如有ajax的增删改行的操作的情况。
3.考虑一般要排序的表格数据量都不大，其中的数组排序使用的是冒泡排序算法。
4.OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj ——可方便用于设置排序后的表格的换行样式等，也出于对性能优化方面的考虑。
好了，最后，附上插件js和demo，目前的实现只能说是能很好的满足我当前项目中的需求或适用于于大多数的场景，如果有没有考虑到或不好的地方，希望各位路过的朋友，能毫不客气的拍砖留言，大家互相交流学习！
OrderTable.rar
原文地址： cnblogs know
您可能感兴趣的文章: