JQuery排序+分页（转帖）

Js代码

<script type="text/javascript">
	$(document).ready(function(){
		$("table.sortable").each(function(){
			var $table = $(this);
			$table.alternateRowColors();
			$("th",$table).each(function(column){				
				var findSortKey;
				if ($(this).is(".sort-alpha")){				
					findSortKey = function($cell){						
						return $cell.find(".sort-key").text().toUpperCase() + " " + $cell.text().toUpperCase();	
					};
				}
				else if($(this).is(".sort-numeric")){
					findSortKey = function($cell){					
						var key = parseFloat($cell.text().replace(/^[^\d.]*/," "));
						return isNaN(key) ? 0 : key;
					};
				}
				else if($(this).is(".sort-data")){
					findSortKey = function($cell){
						return Date.parse('1 ' + $cell.text());
					};
				}
				
				if(findSortKey){				
					$(this).hover(
						function(){
							$(this).addClass("hover");
						},
						function(){
							$(this).removeClass("hover");
						}).click(function(){
						var newDirection = 1;
						if($(this).is(".sorted-asc")){
							newDirection = -1;
						}
						var rows = $table.find("tbody > tr").get();
						$.each(rows,function(index,row){
							row.sortKey = findSortKey($(row).children("td").eq(column));							
						});
						rows.sort(function(a,b){
							if(a.sortKey < b.sortKey) return -newDirection;
							if(a.sortKey > b.sortKey) return newDirection;
							return 0;
						});
						$.each(rows,function(index,row){
							$table.children("tbody").append(row);
							row.sortKey = null;
						});
						$table.find("th").removeClass("sorted-asc").removeClass("sorted-desc");
						var $sortHead = $table.find('th').filter(":nth-child(" + (column+1) + ")");
						if(newDirection == 1){
							$sortHead.addClass("sorted-asc");
						}
						else{
							$sortHead.addClass("sorted-desc");	
						}
						$table.find('td').removeClass("sorted").filter(":nth-child(" + (column+1) + ")").addClass("sorted");
						$table.alternateRowColors();
						$table.trigger("repaginate");	
					});
				};
			});
			var currentPage = 0;
			var numperpage = 5;
			var $table = $(this);
			$table.bind("repaginate",function(){				
				$table.find("tbody tr").show();				
				$("tbody tr:lt(" + currentPage * numperpage + ")").hide().end();				
				$("tbody tr:gt(" + ((currentPage + 1) * numperpage -1) + ")").hide().end();
				
			});
			var numRows = $table.find("tbody tr").length;
			var numPages = Math.ceil(numRows/numperpage);
			var $pager = $('<div class="page"></div>');
			for(var page=0;page<numPages;page++){
				$('<span class="page-number">' + (page+1) + '</span>').bind("click",{"newPage":page},function(event){
					currentPage = event.data["newPage"];				
					$table.trigger("repaginate");			
					$(this).addClass("active").siblings().removeClass("active");
				}).appendTo($pager);
			}
			$pager.find("span.page-number:first").addClass("active");
			$pager.insertBefore($table);
			$table.trigger("repaginate");
		});
	});	
</script>

这段javascript分成两部分看

 

A . 这里主要是用javascript内置的.sort()方法给table表格排序 .

返回值 ：

      正值，如果第一个参数比第二个参数大。

      零，如果两个参数相等。

      负值，如果所传递的第一个参数比第二个参数小。

 

1 .隔行换色，我在这里构建了一个alternateRowColors()隔行换色的jquery插件，把它写在了jquery-1.2.6.js库件里

Js代码

jQuery.fn.alternateRowColors = function(){
	$("tbody tr:odd",this).removeClass("even").addClass("odd");
	$("tbody tr:even",this).removeClass("odd").addClass("even");
	return this;
}

 

调用的时候，这么写$table.alternateRowColors();和其它方法的使用一样.

load页面后执行一次alternateRowColors,click排完序后再执行一次alternateRowColors,否则奇偶排序乱掉了

 

3 .我们需要知道当前点击的是第几列，所以需要传个column获取索引。$("th",$table).each(function(column){})

 

2 .分别对除第一列的每列进行排序

 

   a . .sort()方法

Js代码

 

rows.sort(function(a,b){
	if(a.sortKey < b.sortKey) return -1;
	if(a.sortKey > b.sortKey) return 1;
	return 0;
});

 在这里既要顺序也要逆序排序，所以要定义个var newDirection;顺序排的时候var newDirection = 1；逆序var newDirection = -1

 

    b .第三列，注意了，我这里是按照从第二个单词开始排的序。用span标签取出除第一个单词以外内容。

第二列和第三列的findSortKey的取值写在一起:

Js代码

 

if ($(this).is(".sort-alpha")){				
	findSortKey = function($cell){						
	        return $cell.find(".sort-key").text().toUpperCase() + " " + $cell.text().toUpperCase();	
	};
}

所以后面要加上" " + $cell.text().toUpperCase();这是第二列的findSortKey值。

 

    c .第四列是日期，用Date方法。因为我们的日期没有“日”，所以把“日”都设为1。

Js代码

else if($(this).is(".sort-data")){
	findSortKey = function($cell){
		return Date.parse('1 ' + $cell.text());
	};
}

 

    d .第五列是价格，用正则表达式把出现任意次的换行和回车之外的任意字符和除了数字替换成空格

* : 出现零次或多次(任意次)

\d : [0-9] 数字

. : 除了换行和回车之外的任意字符

^ : 行开头/告诉正则表达式字符不能匹配后面跟着的字符

Js代码

 

else if($(this).is(".sort-numeric")){
	findSortKey = function($cell){					
		var key = parseFloat($cell.text().replace(/^[^\d.]*/," "));
		return isNaN(key) ? 0 : key;
	};
}

4 .用高亮显示排过序的项

Js代码

$table.find('td').removeClass("sorted").filter(":nth-child(" + (column+1) + ")").addClass("sorted");

B .分页

currentPage表示当前页，numperpage表示一页显示的条数。

jquery的方法

Js代码

:lt(index)：匹配所有小于给定索引值的元素
:gt(index)：匹配所有小于给定索引值的元素

构建一个repaginate方法，让大于当前页第一条和小于当前页最后一条的值隐藏。注意索引是从“0”开始

$table.bind("repaginate",function(){    
 $table.find("tbody tr").show();    
 $("tbody tr:lt(" + currentPage * numperpage + ")").hide().end();    
 $("tbody tr:gt(" + ((currentPage + 1) * numperpage -1) + ")").hide().end();   
});