jquery排序分页分析理解-优快云博客

本文链接：https://blog.youkuaiyun.com/long214245394/article/details/83877350
本文介绍了一款基于jQuery的表格排序与分页插件的实现细节，该插件支持字母、数字及日期等多种排序方式，并实现了动态分页功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
	<!--
	table{border-collapse:collapse;width:100%;}
	table th,table td{padding:5px 10px;border:2px #fff solid;}
	table thead{background-color:#abd3a5;color:#fff;}
	table tbody tr.odd{background-color:#ecf9de;}
	table tbody tr.even{background-color:#e1f1d8;}
	table tbody td.sorted{background-color:#f8f6d0;}
	table thead tr th{cursor:pointer;line-height:12px;}
	table thead tr th.sorted-desc{background:#abd3a5 url("images/icon.gif") no-repeat 98% 

7px;}
	table thead tr th.sorted-asc{background:#abd3a5 url("images/icon.gif") no-repeat 98% -

13px;}
	table thead tr th.hover{text-decoration:underline;}
	.page{padding:10px 0;border-bottom:1px dashed #abd3a5;margin-bottom:10px;font-size:12px;}
	.page .page-number{padding:1px 5px;margin-right:5px;cursor:pointer;}
	.page .active{background-color:#abd3a5;color:#fff;}
	-->
</style>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("table.sortable").each(function(){//start循环table
			var $table = $(this);
			$table.alternateRowColors();//endl隔行变色
			
			$("th",$table).each(function(column){//start循环每个th，column存放索引号	

		
				var findSortKey;//存储函数直接量
				if ($(this).is(".sort-alpha")){//按字母变排序
					findSortKey = function($cell){//$cell要排序列的单元格对象  

64行						
						return $cell.find(".sort-key").text().toUpperCase

() + " " + $cell.text().toUpperCase();	
					};//endfunction全部大写
				}
				else if($(this).is(".sort-numeric")){
					findSortKey = function($cell){//按数字排序			

	
						var key = parseFloat($cell.text().replace(/^

[^\d.]*/," "));
						return isNaN(key) ? 0 : key;
					};//endfunction用正则将字符串中的非数字全部去除
				}
				else if($(this).is(".sort-data")){//按日期排序
					findSortKey = function($cell){
						return Date.parse('1 ' + $cell.text());
					};//endfunction(Mar 2009)日月年（1 mar 2009）
				}//endif
				if(findSortKey){				
					$(this).hover(
						function(){
							$(this).addClass("hover");
						},
						function(){
							$(this).removeClass("hover");
						})//end排序列标题添加hover事件
						.click(function(){
						var newDirection = 1;
						if($(this).is(".sorted-asc")){
							newDirection = -1;
						}//endif初始化排序标志1降序-1升序 67行
						$table.find("th").removeClass("sorted-

asc").removeClass("sorted-desc");//事先清理排序标示 77行
						var $sortHead = $table.find('th').filter(":nth-

child(" + (column+1) + ")");//找到当前头部标题
						if(newDirection == 1){
							$sortHead.addClass("sorted-asc");
						}
						else{
							$sortHead.addClass("sorted-desc");	
						}//endif设置头部标题排序方向标示
						var rows = $table.find("tbody > tr").get();
						$.each(rows,function(index,row){
							row.sortKey = findSortKey($(row).children

("td").eq(column));							
						});//end 循环，为每一个tr添加了一个属性=各自排序列

的经过处理后的值（用于排序）
						rows.sort(function(a,b){
							if(a.sortKey < b.sortKey) return -

newDirection;
							if(a.sortKey > b.sortKey) return 

newDirection;
							return 0;
						});//endfunction完成tr列排序
						$.each(rows,function(index,row){
							$table.children("tbody").append(row);
							row.sortKey = null;//清空每一个tr的sortKey

属性
						});//end循环将排序好的br顺序追加到tbody中
						$table.find('td').removeClass("sorted").filter

(":nth-child(" + (column+1) + ")").addClass("sorted");//首先去除所有td sorted,再找到当前列添加

sorted。实现排序列高亮
						$table.alternateRowColors();//因为已经重新绘制了

table所以添加变色
						$table.trigger("repaginate");//触发分页重绘函数
					});//endclick 为每个需要排序的头标题添加click事件（内部会

给据findSortKey（对数据进行了处理）按不同方式排序）
				};//endif
			});//end th循环each
			var currentPage = 0;
			var numperpage = 5;
			$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();//当前页面的最后一条数据，后面的全部隐藏		
			});//endbind为每一个table绑定repaginate事件
			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++){//start每一个分页按钮
				$('<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);
			}//endfor循环为每一个分页按钮添加click事件，得到分页的div
			$pager.find("span.page-number:first").addClass("active");//找到第一个分页

按钮，激活它
			$pager.insertBefore($table);
			$table.trigger("repaginate");//触发分页重绘
		});//endtable循环each
	});//endwindow 初始化
	/*
	 执行过程：
	 第一种情况：
	 1.页面加载完毕，循环每一个排序table，
	      添加隔行变色
	 （1）为每一个需要排序的th（sort-alpha、sort-data、sort-numeric）头标题
		 （1）添加hover事件
	 	 （2）相对应的click事件
	 （2）为每个table绑定repaginate事件
	      执行分页重绘函数（currentPage关键（currentPage顶层代码中））通过隐藏和显示实现
	 （3）绘制div分页显示面板
		      为每一个分页按钮绑定click事件
			     改变顶层作用域中currentPage的值
				 执行页面重绘事件
		
	 （4）找到第一个分页按钮激活它
	 （5）将div分页显示控制面板追加到table上面
	 （6）触发分页重绘事件
			  		 
	 
	 2.单击头标题排序（排好序的列，在分页）
	   第一次单击（降序排列）
	      var newDirection = 1;
		  清理排序标示，
		  为当前th头部标题添加相反的排序标示（很关键的）
		  将排序列排序后重新追加到tbody中
		  找到排序行，先去除同辈元素高亮，再自己高亮
		  重新对table隔行变色
		  触发重绘事件
	  第二次单击（升序排列）
	      因为找到了.sorted-asc newDirection = -1;
		  为当前th头部标题添加相反的排序标示（很关键的）
		  将排序列排序后重新追加到tbody中
		  找到排序行，先去除同辈元素高亮，再自己高亮
		  重新对table隔行变色
		  触发重绘事件
	 3.单击分页按钮
	 	  用传过去的当前页改变代码顶层作用域的currentPage
		  重新绘制（currentPage很重要）
		  激活当前的分页按钮，去除同辈的分页按钮激活
		  
分页面板和排序互不影响
分页面板改变了顶层作用域（currentPage）的值，对当前行序列分页，显示第几页
	      
	 
	 */
</script>
</head>
<body>
<table class="sortable">
	<thead>
		<tr>
			<th></th>
			<th class="sort-alpha">Title</th>
			<th class="sort-alpha">Author(s)</th>
			<th class="sort-data">Publish&nbsp;Date</th>
			<th class="sort-numeric">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>Building Websites with Joomla</td>
			<td>Hagen <span class="sort-key">Graf</span></td>
			<td>May 2006</td>
			<td>$40.49</td>
		</tr>
		<tr>
			<td>2<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>Learning Mambo:A Step-by-step Tutorial to Building Your Website</td>
			<td>Hagen <span class="sort-key">Paterson</span></td>
			<td>Dec 2006</td>
			<td>$40.45</td>
		</tr>
		<tr>
			<td>3<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>Moodie E-Learning Course Development</td>
			<td>Hagen <span class="sort-key">Rice</span></td>
			<td>Feb 2007</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td>4<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>Ajax and PHP:building Responesive Web Applications</td>
			<td>Hagen <span class="sort-key">Qarie,Mihal Buciaca</span></td>
			<td>Mar 2006</td>
			<td>$36.49</td>
		</tr>
		<tr>
			<td>5<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>Jsdt(Javascript Debug Toolkit)javascript</td>
			<td>Hagen <span class="sort-key">Araf</span></td>
			<td>Oct 2006</td>
			<td>$41.49</td>
		</tr>
		<tr>
			<td>6<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>For this particular release</td>
			<td>Hagen <span class="sort-key">Eaterson</span></td>
			<td>Feb 2006</td>
			<td>$45.45</td>
		</tr>
		<tr>
			<td>7<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>In this case, the key is the vimgrep plugin</td>
			<td>Hagen <span class="sort-key">Qice</span></td>
			<td>Jan 2008</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td>8<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>materials up-to-date and freely available</td>
			<td>Hagen <span class="sort-key">Warie,Mihal Buciaca</span></td>
			<td>Mar 2007</td>
			<td>$87.49</td>
		</tr>
		<tr>
			<td>9<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>I'm constantly trying to improve the application</td>
			<td>Hagen <span class="sort-key">Fraf</span></td>
			<td>Mar 2001</td>
			<td>$11.49</td>
		</tr>
		<tr>
			<td>10<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>ZendCon was alternately exhausting, rewarding, educational</td>
			<td>Hagen <span class="sort-key">Laterson</span></td>
			<td>Apr 2006</td>
			<td>$25.45</td>
		</tr>
		<tr>
			<td>11<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>have been really enjoying it. Paired with subversion, I get the best 

of all worlds</td>
			<td>Hagen <span class="sort-key">Yice</span></td>
			<td>Jun 2007</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td>12<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>The pastebin application showcases a number of features besides 

Dojo</td>
			<td>Hagen <span class="sort-key">KMihal Buciaca</span></td>
			<td>Jul 2002</td>
			<td>$75.49</td>
		</tr>
		<tr>
			<td>13<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>demonstrating how to quickly and easily create rich and dynamic UIs 

using</td>
			<td>Hagen <span class="sort-key">Wraf</span></td>
			<td>Aug 2004</td>
			<td>$78.49</td>
		</tr>
		<tr>
			<td>14<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>once you're ready to deploy your application (and why you want to do 

so)</td>
			<td>Hagen <span class="sort-key">Taterson</span></td>
			<td>Dec 2004</td>
			<td>$36.45</td>
		</tr>
		<tr>
			<td>15<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>When using a custom build (and I provide a profile for building one), 

it simply flies</td>
			<td>Hagen <span class="sort-key">Gice</span></td>
			<td>Feb 2003</td>
			<td>$55.99</td>
		</tr>
		<tr>
			<td>16<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>experimenting on my one, I can answer that now</td>
			<td>Hagen <span class="sort-key">Harie,Mihal Buciaca</span></td>
			<td>Dec 2006</td>
			<td>$46.49</td>
		</tr>
		<tr>
			<td>17<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>rewarding, educational, fruitful, infurating, and ultimately 

wonderful</td>
			<td>Hagen <span class="sort-key">Braf</span></td>
			<td>Nov 2006</td>
			<td>$41.49</td>
		</tr>
		<tr>
			<td>18<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>stage where fewer and fewer core components are necessary</td>
			<td>Hagen <span class="sort-key">Jaterson</span></td>
			<td>Dec 2007</td>
			<td>$43.45</td>
		</tr>
		<tr>
			<td>19<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>Clover has the ability to optimise test runs, greatly reducing the 

time</td>
			<td>William <span class="sort-key">Rice</span></td>
			<td>Feb 2007</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td>20<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>Running the optimal subset of tests with each build takes the 

waiting</td>
			<td>Hagen <span class="sort-key">Varie,Mihal Buciaca</span></td>
			<td>Mar 2009</td>
			<td>$22.49</td>
		</tr>
		<tr>
			<td>21<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>Test Optimization can significantly increase the number of build and 

test cycles your </td>
			<td>Hagen <span class="sort-key">Nraf</span></td>
			<td>Feb 2006</td>
			<td>$54.49</td>
		</tr>
		<tr>
			<td>22<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>Contact us ll rights reserved. Your privacy is important to us. </td>
			<td>Hagen <span class="sort-key">Daterson</span></td>
			<td>Aug 2006</td>
			<td>$65.45</td>
		</tr>
		<tr>
			<td>23<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>Version 2.4 of the popular Clover Plugin for IntelliJ IDEA</td>
			<td>Hagen <span class="sort-key">Cice</span></td>
			<td>Jan 2007</td>
			<td>$12.99</td>
		</tr>
		<tr>
			<td>24<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>For Maven users, the maven-clover2-plugin can</td>
			<td>Hagen <span class="sort-key">Mal Buciaca</span></td>
			<td>Mar 2006</td>
			<td>$36.49</td>
		</tr>
		<tr>
			<td>25<img src="images/picture1.jpg" alt="picture1"/></td>
			<td>New visualisations for Dashboard</td>
			<td>Hagen <span class="sort-key">Lraf</span></td>
			<td>Jul 2006</td>
			<td>$33.41</td>
		</tr>
		<tr>
			<td>26<img src="images/picture2.jpg" alt="picture2"/></td>
			<td>New options for Historical Movers report</td>
			<td>Hagen <span class="sort-key">Paterson</span></td>
			<td>Jun 2006</td>
			<td>$45.45</td>
		</tr>
		<tr>
			<td>27<img src="images/picture3.jpg" alt="picture3"/></td>
			<td>View coverage of newly added classes separately</td>
			<td>Hagen <span class="sort-key">Xce</span></td>
			<td>Feb 2027</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td>28<img src="images/picture4.jpg" alt="picture4"/></td>
			<td>Configure Clover to warn you or fail your build when your coverage 

drops</td>
			<td>Hagen <span class="sort-key">Zie,Mihal Buciaca</span></td>
			<td>Mar 2216</td>
			<td>$98.49</td>
		</tr>
	</tbody>
</table>
</body>
</html>