基于jquery的表格排序

2024-10-09 08:46:51

很多高手也位jquery写了专门的排序库，因为自己也想尝试一下，
当然运行速度实在不能接受，但是我会慢慢的把他改进的。
注：这里只是拿出了一部分代码来，查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType，当然这个不符合W3C的标准是无法通过检验的，也可以用ID或者class来定义，但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置，而用：nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.

5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式，如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则，将arr用sort()方法进行排序sort()方式可以接受1个函数，这个函数接受2个参数作为需要比较的数据，我在这里定义为
sortStr();
它有两个参数:

代码如下:

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;

}
else return aText.localeCompare(bText)
}
}

第一个是index，它是在click事件中获得的变量，这个变量包含了被点击的那个'th'的在文档中的位置是一个数字，
jquert的index()方法获得对象的位置，这个位置从0算起，这个例子中有6个'th'；

第二个参数是dataType,他包含每个'th'的属性值。

sortStr()里面包含了一个比较的函数，这个函数是匿名函数，它有2个参数每个参数代表着一个'tbody tr'，（在这里a和b代表需要比较的tr）这两个参数是在包含他的函数环境中获取的，sort()方法里面的参数，在这是一个函数，这个函数都会获得数组对象的元素，
这个匿名函数返回对操作数组的引用。
arr里面包含的一个数组，每个数组的值包含对tbody里面的tr的引用，排序函数按照返回的值对原有数组里面的元素直接进行位置的改变，

var aText=$(a).find('td:nth-child('+index+')').text();
获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值，
click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置；

代码如下:

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}

如果需要排序的类型是不包含了数字和字母的话，（因为拥有roomType值的元素所包含了数字和字母），将获得的td里面的文本值和dataType传递到
Parse()里面进行转换，

代码如下:

function Parse(data,dataType){
switch(dataType){
case 'num':
return parseFloat(data)||0
case 'date':
return Date.parse(data)||0
default :
return splitStr(data)
}
}

如果是数字类型直接转换为浮点数，

return parseFloat(data)||0
要是出现了布恩那个转换的对象字符串那么返回0；因为这个文档里面有一个NaN这个是无法转换的，所以返回的是0；

如果是日期类型可以用Date.parse直接转换为数字，这个转换是从1970年到转换参数的时间，
这个时间转换我试了试可以精确到秒的，比如说1971/01/2 18:12:20、01/2/1970 18:12:20写法都可以转换;
之后

return aText>;bText?-1:bText>;aText?1:0;
返回比较值aText比bText大返回一个小于0的任何数字都可以，相反返回一个正数，如果都不是的话返回0；如果不是日期也不是数字（在这个文档中目前只能转换3中数据：1.日期。2.数字。3.字符串和数字一起的）,
default :
return splitStr(data)
我把他放到splitStr()里面进行转换

splitStr()的内容如下：

代码如下:

function splitStr(data){
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}

正则表达式：分为三部分 1部分^[a-zA-Z ]*;中间部分(.*?);结尾部分[a-zA-Z ]*$
可以这样看/ /是包含块，
第一部分 ^表示目标字符串开头，[]之间表示A-Z无论大小写都被忽略掉，里面还有个空格，*表示它左边[]里面的内容可以出现任意次数;
中间部分 ()是个分组，分组内容会被放置到RegExp的第一项中'$1′，'.'匹配所有（除了空格）*?懒惰方式;
最后部分 []之间与后面的*和第一部分是一样的都是去掉字母，$表示结尾部分；
\$表示匹配$号

代码如下:

否则直接使用localeCompare进行比较，这个是专门对字符串进行比较的方法，如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数，负数和0；

代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的，这个时间会在最中间那个'th'的'span'标记里面显示出来，这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。

完整的代码:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格排序</title>
<script src="../jquery1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">

$(function(){
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
var index=$('th').index(this)+1;
var arr=[];
var row=$('tbody tr');
$.each(row,function(i){ arr[i]=row[i] })
if($(this).hasClass('select')){
arr.reverse()
}
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
var fragment=document.createDocumentFragment()
$.each(arr,function(i){
fragment.appendChild(arr[i])
})
// $('tbody').remove();
//$('table').append('<tbody></tbody>')
//Each(arr,function(o){fragment.appendChild(o)})
$('tbody').append(fragment)
var date2=(new Date()).getTime()
$('th span').text(date2-date1)
})
})

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>bText?-1:bText>aText?1:0;
}
else return aText.localeCompare(bText)
}
}
function Parse(data,dataType){
switch(dataType){
case 'num':
return parseFloat(data)||0
case 'date':
return Date.parse(data)||0
default :
return splitStr(data)
}
}
function splitStr(data){
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}

//web开发交流blog 文档来源 www.mymickey.org 作者 mickey
//转载请注明来源
</script>
<style type="text/css">
table {
text-align:center;
border:1px #ccc solid;
border-collapse:collapse;
width:700px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
tr {
border-bottom:1px #ccc solid;
}
td {
padding:.3em 0 .3em 0;
}
th {
cursor:pointer;
background:url(room-bg.gif) 0 -13px repeat-x;
height:30px;
color:#009;
}
td.select {
color:#000;
}
th.select {
background-image:none;
background-color:#C4D5D9;
}
span {
}
</style>
</head>
<body>
<a href="http://www.mymickey.org" style="font-size:14px; color:#F60">返回文章</a>

<table>
<thead>
<tr>
<th dataType="roomNum">房号</th>
<th dataType="date">日期</th>
<th dataType="roomType">房间类型<span></span></th>
<th dataType="num">床位</th>
<th dataType="container">容量</th>
<th dataType="Float">价格/晚</th>
<th dataType="Float">合计</th>
</tr>
</thead>
<tbody>
<tr >
<td>u0628</td>
<td >9/14/2008</td>
<td >Std Hotel Room 2 Double (27 left)</td>
<td >2</td>
<td >4 人</td>
<td >$109.00</td>
<td>$436.00</td>
</tr>
<tr >
<td>u0631</td>
<td >10/4/2008</td>
<td >Lodge Rm/Shared Bath Q (4 left)</td>
<td >1</td>
<td >2 人</td>
<td >$109.00</td>
<td>$436.00</td>
</tr>
<tr >
<td >u0636</td>
<td >9/18/2008</td>
<td >Std Hotel Room Q (34 left)</td>
<td >1</td>
<td >2 人</td>
<td >$117.00</td>
<td >$466.00</td>
</tr>
<tr >
<td>u0638</td>
<td >9/19/2008</td>
<td >Std Hotel Room 2 Q (28 left)</td>
<td >2</td>
<td >4 人</td>
<td >$117.00</td>
<td>$466.00</td>
</tr>
<tr >
<td>u0612</td>
<td >9/1/2008</td>
<td >Studio Condo (10 left)</td>
<td >1</td>
<td >4 人</td>
<td >$149.00</td>
<td>$596.00</td>
</tr>
<tr >
<td>u0626</td>
<td >9/13/2008</td>
<td >Hotel Jr Suite K (4 left)</td>
<td >1</td>
<td >2 人</td>
<td >$149.00</td>
<td>$596.00</td>
</tr>
<tr >
<td>u0641</td>
<td >9/22/2008</td>
<td >Hotel Superior K (26 left)</td>
<td >1</td>
<td >2 人</td>
<td >$149.00</td>
<td>$596.00</td>
</tr>
<tr >
<td>u0602</td>
<td >8/31/2008</td>
<td >1 Bdrm Condo K (96 left)</td>
<td >1</td>
<td >4 人</td>
<td >$169.00</td>
<td>$676.00</td>
</tr>
<tr >
<td>u0616</td>
<td >10/8/2008</td>
<td >Studio Condo Murphy (5 left)</td>
<td >NaN</td>
<td >4 人</td>
<td >$169.00</td>
<td>$676.00</td>
</tr>
<tr >
<td>u0623</td>
<td >10/2/2008</td>
<td >Studio Cabin Q (6 left)</td>
<td >1</td>
<td >2 人</td>
<td >$169.00</td>
<td>$676.00</td>
</tr>
<tr >
<td>u0633</td>
<td >9/16/2008</td>
<td >Studio Q/Murphy (6 left)</td>
<td >2</td>
<td >4 人</td>
<td >$169.00</td>
<td>$676.00</td>
</tr>
<tr >
<td>u0637</td>
<td >10/5/2008</td>
<td >Lodge Room Q (4 left)</td>
<td >1</td>
<td >2 人</td>
<td >$169.00</td>
<td>$676.00</td>
</tr>
<tr >
<td>u0622</td>
<td >9/11/2008</td>
<td >Hotel Loft Ste K/Q (3 left)</td>
<td >2</td>
<td >4 人</td>
<td >$179.00</td>
<td>$716.00</td>
</tr>
<tr >
<td>u0629</td>
<td >10/10/2008</td>
<td >1 Bdrm Condo K (76 left)</td>
<td >1</td>
<td >4 人</td>
<td >$179.00</td>
<td>$716.00</td>
</tr>
<tr >
<td>u0603</td>
<td >9/8/2008</td>
<td >Hotel Loft K/Q (16 left)</td>
<td >2</td>
<td >4 人</td>
<td >$189.00</td>
<td>$756.00</td>
</tr>
<tr >
<td>u0632</td>
<td >9/15/2008</td>
<td >Hotel Loft K/2T (15 left)</td>
<td >3</td>
<td >4 人</td>
<td >$189.00</td>
<td>$756.00</td>
</tr>
<tr >
<td>u0619</td>
<td >10/1/2008</td>
<td >Studio Cabin Firepl K (6 left)</td>
<td >1</td>
<td >2 人</td>
<td >$209.00</td>
<td>$836.00</td>
</tr>
<tr >
<td>u0608</td>
<td >10/7/2008</td>
<td >1 Bdrm Condo with Den K (1 left)</td>
<td >1</td>
<td >6 人</td>
<td >$222.00</td>
<td>$886.00</td>
</tr>
<tr >
<td>u0620</td>
<td >9/5/2008</td>
<td >2 Bdrm Condo K/K (25 left)</td>
<td >2</td>
<td >6 人</td>
<td >$229.00</td>
<td>$916.00</td>
</tr>
<tr >
<td>u0630</td>
<td >9/7/2008</td>
<td >2 Bdrm Condo K/2T (57 left)</td>
<td >3</td>
<td >6 人</td>
<td >$229.00</td>
<td>$916.00</td>
</tr>
<tr >
<td>u0634</td>
<td >10/11/2008</td>
<td >2 Bdrm Condo K/Q (88 left)</td>
<td>2</td>
<td>6 人</td>
<td>$229.00</td>
<td>$916.00</td>
</tr>
<tr >
<td>u0639</td>
<td >9/20/2008</td>
<td >1 Bdrm K/Murphy (19 left)</td>
<td >2</td>
<td >4 人</td>
<td >$229.00</td>
<td>$916.00</td>
</tr>
<tr >
<td>u0614</td>
<td >9/2/2008</td>
<td >2 Bdrm Townhome (7 left)</td>
<td >2</td>
<td >4 人</td>
<td >$239.00</td>
<td>$956.00</td>
</tr>
<tr >
<td>u0610</td>
<td >9/10/2008</td>
<td >1 Bdrm Loft K/Q+2T/Murphy (5 left)</td>
<td >5</td>
<td >8 人</td>
<td >$269.00</td>
<td>$1076.00</td>
</tr>
<tr >
<td>u0625</td>
<td >9/12/2008</td>
<td >2 Bdrm K/Q/Murphy (6 left)</td>
<td >3</td>
<td >6 人</td>
<td >$269.00</td>
<td>$1076.00</td>
</tr>
<tr >
<td>u0640</td>
<td >9/21/2008</td>
<td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td>
<td >4</td>
<td >8 人</td>
<td >$269.00</td>
<td>$1076.00</td>
</tr>
<tr >
<td>u0606</td>
<td >9/26/2008</td>
<td >2 Bdrm Cabin K/Q+T (2 left)</td>
<td >3</td>
<td >5 人</td>
<td >$279.00</td>
<td>$1116.00</td>
</tr>
<tr >
<td>u0613</td>
<td >9/29/2008</td>
<td >Lodge 2 Bdrm Suite Q/Q (1 left)</td>
<td >2</td>
<td >4 人</td>
<td >$279.00</td>
<td>$1116.00</td>
</tr>
<tr >
<td>u0624</td>
<td >10/3/2008</td>
<td >1 Bdrm Cabin Firepl K (3 left)</td>
<td >1</td>
<td >4 人</td>
<td >$279.00</td>
<td>$1116.00</td>
</tr>
<tr >
<td>u0618</td>
<td >9/4/2008</td>
<td >2 Bdrm Condo w/Den Custom (1 left)</td>
<td >2</td>
<td >6 人</td>
<td >$329.00</td>
<td>$1316.00</td>
</tr>
<tr >
<td>u0627</td>
<td >10/9/2008</td>
<td >3 Bdrm Condo K/Q/Q (6 left)</td>
<td >3</td>
<td >8 人</td>
<td >$339.00</td>
<td>$1356.00</td>
</tr>
<tr >
<td>u0642</td>
<td >9/23/2008</td>
<td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td>
<td >3</td>
<td >7 人</td>
<td >$339.00</td>
<td>$1356.00</td>
</tr>
<tr >
<td>u0615</td>
<td >9/3/2008</td>
<td >3 Bdrm Condo K/Q/2T (2 left)</td>
<td >4</td>
<td >8 人</td>
<td >$379.00</td>
<td>$1516.00</td>
</tr>
<tr >
<td>u0607</td>
<td >9/9/2008</td>
<td >2 Bdrm. Loft K/Q/Q,3T/SS (9 left)</td>
<td >6</td>
<td >11 人</td>
<td >$389.00</td>
<td>$1556.00</td>
</tr>
<tr >
<td>u0609</td>
<td >9/27/2008</td>
<td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td>
<td >1</td>
<td >4 人</td>
<td >$389.00</td>
<td>$1556.00</td>
</tr>
<tr >
<td>u0635</td>
<td >9/17/2008</td>
<td >Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td>
<td >4</td>
<td >10 人</td>
<td >$399.00</td>
<td>$1596.00</td>
</tr>
<tr >
<td>u0621</td>
<td >9/6/2008</td>
<td >3 Bdrm Townhome (3 left)</td>
<td >3</td>
<td >6 人</td>
<td >$409.00</td>
<td>$1636.00</td>
</tr>
<tr >
<td>u0601</td>
<td >9/24/2008</td>
<td >3 Bdrm Cabin K/Q+T/2T (1 left)</td>
<td >5</td>
<td >9 人</td>
<td >$469.00</td>
<td>$1876.00</td>
</tr>
<tr >
<td>u0605</td>
<td >9/25/2008</td>
<td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td>
<td >3</td>
<td >6 人</td>
<td >$469.00</td>
<td>$1876.00</td>
</tr>
<tr >
<td>u0611</td>
<td >9/28/2008</td>
<td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td>
<td >2</td>
<td >6 人</td>
<td >$469.00</td>
<td>$1876.00</td>
</tr>
<tr >
<td>u0604</td>
<td >10/6/2008</td>
<td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td>
<td >3</td>
<td >8 人</td>
<td >$499.00</td>
<td>$1996.00</td>
</tr>
<tr >
<td>u0617</td>
<td >9/30/2008</td>
<td >Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)</td>
<td >5</td>
<td >8 人</td>
<td >$549.00</td>
<td>$2196.00</td>
</tr>
</tbody>
</table>
</body>
</html>

jquery tablesorter.js 支持中文表格排序改进

代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p
jquery实现表格本地排序的方法

本文实例讲述了jquery实现表格本地排序的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery 表格排序</title> <style type="text/css"> thead
扩展jquery实现客户端表格的分页、排序功能代码

下载代码和示例:jqueryPaging.rar 使用方法如下: 复制代码代码如下: <script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number"
jQuery实现的表格前端排序功能示例

本文实例讲述了jQuery实现的表格前端排序功能.分享给大家供大家参考,具体如下: 表格前端按列排序依赖jQuery(本例使用jQuery-1.8.2) 1.初始化方法 (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr =
jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面
jQuery增加和删除表格项目及实现表格项目排序的方法

增加和删除行 jquery对表格的操作是老生常谈的问题.最近项目中用到了,今天在这里分享一下! 效果大体如下: 分享一下代码吧! html <div class="table-responsive" id="Bk_table" style="display:none;"> <table class="table table-hover table-bordered"> <thead> <
jquery 表格排序、实时搜索表格内容(附图)

复制代码代码如下: <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th>
基于jQuery实现表格的排序

$(function(){ //存入点击列的每一个TD的内容: var aTdCont = []; //点击列的索引值 var thi = 0 //重新对TR进行排序 var setTrIndex = function(tdIndex){ for(i=0;i<aTdCont.length;i++){ var trCont = aTdCont[i]; $("tbody tr").each(function() { var thisText = $(this).children(&q
jquery.tableSort.js表格排序插件使用方法详解

本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
Jquery 选中表格一列并对表格排序实现原理

在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理. 为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能. 该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个<tr>中的html,同时获取每个<tr>标签下对应获取到的列号的<td>标签中
jQuery表格排序组件-tablesorter使用示例

一.引入文件复制代码代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script>  <
jQuery html表格排序插件tablesorter使用方法详解

tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="

基于jquery的表格排序

相关推荐

随机推荐