📄 tablesort.html
字号:
<!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:url("images/icon.gif") no-repeat 98% 7px;}
table thead tr th.sorted-asc{background: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(){
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>
</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 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>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -