标签：
代码实现：
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
标签：
原文地址：http://www.cnblogs.com/k11590823/p/4978008.html
