jquery 排序+分页

<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库件里

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()方法

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的取值写在一起:

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。

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

 

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

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

\d : [0-9] 数字

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

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

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

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

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

B .分页

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

jquery的方法

: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();			
});

评论

8 楼 guji528 2009-08-17  

在客户端使用JavaScript排序的好处就是减轻服务器的压力，不过页面的代码量却变多了。这个功能很实用，有空试试看。

7 楼 gaoqiao0313 2009-07-29  

刚刚试了下，中文排序，有点问题

6 楼 343101272 2009-07-03  

谢谢，刚好用到

5 楼 pure1202 2009-03-20  

我喜欢这个

4 楼 曾经地迷茫 2009-01-08  

排序+分页 很好 

3 楼 nopain_nogain 2008-12-23  

很好,很强大.

2 楼 ice-cream 2008-12-09  

饭特稀 写道

有点bug~点标题栏排序~点击后标题栏就不显示了~变白的了~

刚看了下确实有你说的这个bug，平时都用firefox的，你说的问题是ie下的，是css问题，已经改好了，

1 楼 饭特稀 2008-12-09  

有点bug~点标题栏排序~点击后标题栏就不显示了~变白的了~