long214245394
- 浏览: 13104 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
<!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 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>
- javascript排序分页.rar (61.6 KB)
- 下载次数: 20
分享到：
发表评论
相关推荐
本文将深入探讨如何使用 jQuery 来实现排序和分页功能，这两个功能在数据展示和用户交互中非常常见，特别是对于表格数据。 **一、jQuery 排序** 1. **jQuery Tablesorter 插件**： `jquery.tablesorter` 是一个...
这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案，无需服务器端的支持，使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
在实际的项目中，表格分页和排序插件如SlimTable对于数据分析、产品列表、用户管理等场景非常实用。它能够提高数据的可读性和用户对大量信息的管理能力。同时，由于其轻量级的特性，即使在性能较低的设备上也能流畅...
在网页开发中，数据展示是不可或缺的一部分，而jQuery实现的分页排序Table组件则为开发者提供了高效、灵活的方式来处理大量数据的展示问题。这个组件通常用于动态加载和组织表格数据，使得用户可以轻松浏览和操作...
- **排序**：支持对数据进行排序，分页结果随之更新。 以上就是使用jQuery实现分页插件的基本步骤和关键知识点。通过理解这些原理和实践，你可以根据实际需求定制出更符合项目特色的分页解决方案。
首先，我们需要理解jQuery的核心概念。jQuery通过提供易用的API，使得JavaScript代码更简洁、更高效。例如，`$(selector)`用于选取DOM元素，`.click(function)`用于绑定点击事件，`.html()`用于获取或设置元素的HTML...
《jQuery TableSorter：实现高效表格排序与分页功能》 在网页开发中，数据的展示往往离不开表格，而对表格进行排序和分页...通过理解其基本原理和使用方法，开发者可以快速地实现动态排序和分页，提升网页的交互体验。
本主题关注的是如何利用jQuery实现表格的数据筛选、排序和分页功能，这些都是网页数据展示中常见的需求。 一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中，可以使用`...
首先，理解jQuery table分页的基本概念。表格分页是指将大量数据分成多个小块（通常每页显示固定数量的行），用户可以通过页码或导航按钮在这些数据块之间切换。这使得用户可以快速浏览和定位他们关心的信息，而无需...
**jQuery Table 分页插件详解** 在Web开发中，数据展示是常见的需求，尤其是在处理大量数据时，分页成为提高用户体验的重要手段。jQuery Table分页插件为开发者提供了便捷的解决方案，它允许用户轻松地在表格中实现...
jQuery的tablesorter插件为开发者提供了一种便捷的方式，使得表格数据可以实现动态排序、分页以及与服务器端的数据交互，大大提升了用户体验。本文将围绕"jquery.tablesorter.js +排序、分页、ajax demo"这一主题，...
5. 对于Repeater，需要自定义分页和排序逻辑，可能涉及JavaScript或jQuery来实现客户端分页效果。 总之，DataList和Repeater在分页与排序上有不同的处理方式，开发者应根据项目需求选择合适的控件。同时，良好的...
jQuery表格数据分页插件是一种高效且用户友好的方式，用于在网页上展示大量数据，尤其是在处理表格时。...通过分析和理解这些组件，开发者可以有效地集成和自定义这个插件，提升其网页应用的数据管理能力。
【简单的JqueryAjax分页】知识点详解 ...以上就是关于"简单的JqueryAjax分页"的知识点详解，通过理解这些概念和实践，你可以构建出一个基础但实用的分页系统。在实际项目中，可以根据需求进一步扩展和完善。
首先，我们需要理解分页的基本概念。分页是将大量数据分为多个部分（页）进行显示，每一页展示一部分数据，用户可以通过点击页码或导航按钮在不同页面间切换。这不仅能够避免一次性加载过多数据导致页面响应变慢，还...
这个“jquery无刷新分页排序.rar”压缩包提供了一个使用jQuery库实现的示例，该示例是在C#环境下，通过Visual Studio 2005（VS2005）开发的。下面我们将详细探讨这个知识点。 首先，jQuery是一个轻量级、高性能的...
**jQuery Ajax 分页插件 jquery_paginator 知识点详解** 在Web开发中，当页面数据量过大时，为了提高...通过深入理解jQuery和Ajax原理，结合插件的配置和事件机制，开发者可以轻松地将分页功能集成到任何Web项目中。
`tablesorter`插件还支持其他高级功能，如自定义排序图标、分页、过滤等。通过查阅官方文档或提供的示例，你可以进一步了解并根据项目需求进行配置。 总的来说，使用jQuery和`tablesorter`插件，我们可以轻松地为...