微客导航 » 文章资讯 » jQuery实现的表格前端排序功能示例

jQuery实现的表格前端排序功能示例

2023-09-24 13:21:05 306

本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考，具体如下：

表格前端按列排序

依赖jQuery(本例使用jQuery-1.8.2)

1.初始化方法

(function($){
//插件
$.extend($,{
//命名空间
sortTable:{
sort:function(tableId,Idx){
vartable=document.getElementById(tableId);
vartbody=table.tBodies[0];
vartr=tbody.rows;
vartrValue=newArray();
for(vari=0;i0){
varnum1=value1.substring(0,index1);
varnum2=value1.substring(index1+1,value1.length-1);
varnum3=value2.substring(0,index2);
varnum4=value2.substring(index2+1,value2.length-1);
if(parseFloat(num1)>parseFloat(num3)){
return1;
}
if(parseFloat(num1)0){
for(vark=arrtotal.length;k<0;k--){
tbody.appendChild(trValue[arrtotal[k]]);
}
}
//tbody.appendChild(trValue[index]);
tbody.appendChild(fragment);//将排序的结果替换掉之前的值
tbody.sortCol=Idx;
}
}
});
})(jQuery);

2.页面函数

functiondesc_change(id,str){
$("#desc_1").html("日期");
$("#desc_2").html("ID");
$("#desc_3").html("类别");
$("#"+id).html(str);
}
functiondesc(id,str){
varhtmlstr=$("#"+id).text().trim();
varc=str;
if(htmlstr==str){
c=str+'↓';
$("#"+id).html(c);
}elseif(htmlstr==str+'↓'){
c=str+'↑'
$("#"+id).html(c);
}elseif(htmlstr==str+'↑'){
c=str+'↓'
$("#"+id).html(c);
}
desc_change(id,c)
}

3.DOM结构




日期
ID
类别




201870601
汇总
新闻

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

jQuery实现的表格前端排序功能示例

热门推荐

随机推荐