jquery.sort——表格排序插件

原文地址：点击打开链接

首先声明：原创并不是本人， 但本人在原创的基础上做了较大的修改, 算是半原创吧:

1. 添加了卸载函数 unsort ， 从而能在表格数据反复变动（AJAX 页面是经常用到的）的情况下使用—— $table.unsort().sort();

2. 适应IE6。  原文中用图片地址来判断图片， 但有些浏览器会修改图片的src(将相对变绝对等)从而出错。

3. 增加回调函数，更方便。

4. 极力缩减代码行数，使之简短。

再次感谢ZouHao ， 是他给我们带来了最初宝贵的启示！

/**
 * Author     : ZouHao
 * Description: jquery表格插件
 * Modify by  : yenange on 2014-02-07
 * Example    :
 * 1: 默认 ( 图片位置确定为js中写死的位置，而且最后一行不需要去掉 ) 
    $("#table1").sort();
 * 2: 参数使用语法
    $("#table1").sort({
        'ascImgUrl':    '/static/images/bullet_arrow_up.png',       //升序图片地址
        'descImgUrl':   '/static/images/bullet_arrow_down.png',     //降序图片地址
        'endRow':0,		                                            //去掉最后几行, 不去掉为0, 去掉一行为 -1 ……
        'isHeaderTh':true,                                          //头部是否为th
        'callback': function(){  }                                  //回调函数
    });
 */
;(function ($) {  
	$.fn.sort = function (options) {  
		var settings = $.extend({
			'ascImgUrl':'/static/images/bullet_arrow_up.png',       //升序图片
			'descImgUrl':'/static/images/bullet_arrow_down.png',    //降序图片
			'endRow':0,		        //去掉最后几行, 不去掉为0, 去掉一行为 -1 ……
			'isHeaderTh':true       //头部是否为th
		},options);
		init(this);
		function init(p){
			/** 初始化一些变量 */
			var node=settings.isHeaderTh?'th':'td';
			var $sortImgParents=$(p).find("tr "+node+"[sort='true']");
			/** 初始化头部图片 */
			addImg($sortImgParents);
			
			/** 初始化点击表格头部事件 */
			$sortImgParents.css("cursor","pointer").bind("click.sort",function(){
				/** 获取当前行数*/
				settings.startRow=$(this).parent().index();
				settings.index=$(this).index();
				//得到当前单元格点击时的可见排序图片集合
				var $sortImgs = $(this).find("img[sortTable]:visible");
				//得到改变之后的排序方向
				var sortDirection = ($sortImgs.size()==2 || $sortImgs.attr("sortTable")=="desc") ? "asc" : "desc";
				
				$sortImgParents.find("img[sortTable]").show();  //将所有图片全部显示
				hideImg(this,sortDirection);                    //隐藏当前点击的图片，并将反向图片显示出来
				changeTableBody(p,sortDirection);               //排序
				if(settings.callback){                          
				    settings.callback();                        //执行回调
				}
			});
		}
		
		/** 将数据进行排序 */
		function changeTableBody(p,sort){
		    var calRow = settings.endRow < 0 ? $(p).find("tr").size()+settings.endRow : $(p).find("tr").size()-settings.endRow;
			var data=new Array();
			//所选的行
			var trBodyList=$(p).find("tr:lt("+ calRow +"):gt("+settings.startRow+")");
			trBodyList.each(function(i){
				data[i]=new Array();
				$(this).find("td").each(function(j){
					data[i][j]=$(this).html();
				});
			});
			data.sort(function(x, y){  
                return sort=='asc' ? x[settings.index].localeCompare(y[settings.index]) : y[settings.index].localeCompare(x[settings.index]);  
			});
			trBodyList.each(function(i){
				$(this).find("td").each(function(j){
					$(this).html(data[i][j]);
				});
			});
		}
		/** 为每个表格头部添加图片 */
		function addImg($sortImgParents){
			$sortImgParents.find("img[sortTable]").remove().end().append('<img sortTable="asc" src="'+settings.ascImgUrl+'" style="width:8px;height:8px;" /><img sortTable="desc" src="'+settings.descImgUrl+'" style="width:8px;height:8px;" />');
		}
		/** 隐藏当前点击表格升序/降序图片 */
		function hideImg(currHeader,sort){
		    $(currHeader).find("img[sortTable]").each(function(){ $(this).toggle( $(this).attr("sortTable") == sort) });
		}
		return this;
	};
	/** 取消排序效果 */
	$.fn.unsort = function () {
		$(this).find("[sort='true']").css("cursor","auto").unbind("click.sort").find("img[sortTable]").remove();
	    return this;
	};
})(jQuery);