代码实现：
html：
1 <div class="wrap">
2 <table class="table sortTable">
3 <thead>
4 <tr>
5 <th class="sortable" data-sort=‘number‘>序号</th>
6 <th class="sortable" data-sort=‘string‘>姓名</th>
7 <th class="sortable" data-sort=‘number‘>身高</th>
8 <th class="sortable" data-sort=‘date‘>生日</th>
9 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <td>01</td>
14 <td>Kevin</td>
15 <td>180</td>
16 <td>1991-10-01</td>
17 </tr>
18 <tr>
19 <td>02</td>
20 <td>Amy</td>
21 <td>165</td>
22 <td>1992-01-01</td>
23 </tr>
24 <tr>
25 <td>03</td>
26 <td>Tom</td>
27 <td>176</td>
28 <td>1990-01-01</td>
29 </tr>
30 <tr>
31 <td>04</td>
32 <td>Jack</td>
33 <td>182</td>
34 <td>1990-05-01</td>
35 </tr>
36 <tr>
37 <td>05</td>
38 <td>Kobe</td>
39 <td>172</td>
40 <td>1990-02-01</td>
41 </tr>
42 </tbody>
43 </table>
44 </div>
45 <script src="jquery.min.js"></script>
46 <script src="index.js"></script>
47 <script>
48 $(function(){
49 new TableSort({
50 // 测试回调函数的执行
51 ‘callback‘:function(){console.log(‘callback!‘)}
52 })
53 });
54 </script>
css：
1 .wrap{width:500px;margin:20px auto;font-family:‘微软雅黑‘;}
2 .table{width:100%;}
3 .table th{font-weight:bold;}
4 .table th,.table td{padding:10px;vertical-align:top;text-align:center;}
5 .table td{border-top:1px solid #ccc;}
6 .table .sortable{cursor:pointer;}
7 .table .st-active{background:#ccc;color:#fff;border-radius:3px;}
jQuery：( index.js )
1 function TableSort(options){
2 this.config = {
3 ‘table‘ : ‘.table‘, // table标签的类名
4 ‘sortClass‘ : ‘.sortable‘, // 需排列的table的列的类名
5 ‘callback‘ : null // 回调函数
6 };
7 this.cache = {
8 trArrs : [], // 存放tbody的所有tr的缓冲区
9 };
10 this._init(options);
11 }
12 TableSort.prototype = {
13 constructor : TableSort,
14 _init : function(options){
15 var _self = this;
16 var config = $.extend(_self.config , options||{});
17 // 将tbody的所有tr存放到这个数组中(缓冲区)，对表格排序实际上就是对这个数组中的所有tr对象排序
18 for(var i = 0;i < $(‘tbody tr‘).length;i++){
19 _self.cache.trArrs.push($(‘tbody tr‘).eq(i));
20 }
21 $.each($(config.sortClass),function(i,val){
22 $(val).off(‘click‘);
23 $(val).on(‘click‘,function(){
24 var _this = $(this);
25 var _parent = $(this).parent().parent().parent().find(‘tbody‘);
26 _self._active(_this);
27 _self._reverse(_this,‘reverse‘);
28 _self._sortMain(_this, _parent, i);
29 });
30 });
31 },
32 _active : function(obj){
33 obj.siblings().removeClass(‘st-active‘);
34 obj.addClass(‘st-active‘);
35 },
36 _reverse : function(obj,className){
37 if(obj.hasClass(className)){
38 obj.removeClass(className);
39 }else{
40 obj.addClass(className);
41 }
42 },
43 _sortMain : function(self,parent,index){
44 var sortType = self.data(‘sort‘);
45 var trArrs = this.cache.trArrs;
46 var callback = this.config.callback;
47 if(sortType == ‘number‘){
48 // 数字类型排序
49 trArrs.sort(function(a,b){
50 if(self.hasClass(‘reverse‘)){
51 return a.find(‘td‘).eq(index).html() - b.find(‘td‘).eq(index).html();
52 }else{
53 return b.find(‘td‘).eq(index).html() - a.find(‘td‘).eq(index).html();
54 }
55 });
56 }else if(sortType == ‘string‘){
57 // 字母类型排序
58 trArrs.sort(function(a,b){
59 if(self.hasClass(‘reverse‘)){
60 return a.find(‘td‘).eq(index).html().localeCompare(b.find(‘td‘).eq(index).html());
61 }else{
62 return b.find(‘td‘).eq(index).html().localeCompare(a.find(‘td‘).eq(index).html());
63 }
64 });
65 }else if(sortType == ‘date‘){
66 // 日期类型排序
67 trArrs.sort(function(a,b){
68 if(self.hasClass(‘reverse‘)){
69 return Date.parse(b.find(‘td‘).eq(index).html().replace(/-/g,‘/‘)) - Date.parse(a.find(‘td‘).eq(index).html().replace(/-/g,‘/‘));
70 }else{
71 return Date.parse(a.find(‘td‘).eq(index).html().replace(/-/g,‘/‘)) - Date.parse(b.find(‘td‘).eq(index).html().replace(/-/g,‘/‘));
72 }
73 });
74 }
75 // 数组排好序之后再append到tbody下
76 for(var i = 0;i < trArrs.length;i++){
77 parent.append(trArrs[i]);
78 }
79 // 回调函数判断与执行
80 callback && $.isFunction(callback) && callback();
81 }
82 }
需要注意的两点：
1、此处排序需要我们能深刻理解javascript的sort()方法和localeCompare()方法等
2、jQuery的append()方法 - 追加一个 jQuery 对象：该方法将把节点 newchild 添加到文档中，使它成为当前节点的最后一个子节点。如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
网上参考：http://www.cnblogs.com/tugenhua0707/p/3496596.html
时间： 2024-07-29 22:27:42