jquery排序分页分析理解
<!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循环tablevar $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）}//endifif(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循环eachvar 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 alt="jquery排序分页分析了解"/></td><td>Building Websites with Joomla</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Learning Mambo:A Step-by-step Tutorial to Building Your Website</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Moodie E-Learning Course Development</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Ajax and PHP:building Responesive Web Applications</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Jsdt(Javascript Debug Toolkit)javascript</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>For this particular release</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>In this case, the key is the vimgrep plugin</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>materials up-to-date and freely available</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>I'm constantly trying to improve the application</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>ZendCon was alternately exhausting, rewarding, educational</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>have been really enjoying it. Paired with subversion, I get the best of all worlds</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>The pastebin application showcases a number of features besides Dojo</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>demonstrating how to quickly and easily create rich and dynamic UIs using</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>once you're ready to deploy your application (and why you want to do so)</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>When using a custom build (and I provide a profile for building one), it simply flies</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>experimenting on my one, I can answer that now</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>rewarding, educational, fruitful, infurating, and ultimately wonderful</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>stage where fewer and fewer core components are necessary</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Clover has the ability to optimise test runs, greatly reducing the time</td><td>William <span alt="jquery排序分页分析了解"/></td><td>Running the optimal subset of tests with each build takes the waiting</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Test Optimization can significantly increase the number of build and test cycles your </td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Contact us ll rights reserved. Your privacy is important to us. </td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>Version 2.4 of the popular Clover Plugin for IntelliJ IDEA</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>For Maven users, the maven-clover2-plugin can</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>New visualisations for Dashboard</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>New options for Historical Movers report</td><td>Hagen <span alt="jquery排序分页分析了解"/></td><td>View coverage of newly added classes separately</td><td>Hagen <span alt="jquery排序分页分析了解"/></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>?