JS实现table表格数据排序功能(可支持动态数据+分页效果)


Posted in Javascript onMay 26, 2016

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序.

数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点.

下面把html的代码贴出来:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>js操作刷新</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8" ;>
<script language="javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</HEAD>
<SCRIPT>
//--------------------- 排序
//需要在排序的table上加id="tableNeed",需在排序的列上加onclick="sortt('.?')",在此列所有<td>上加class="?"
function sortt(className){
var listName=new Array();
var listNameOld=new Array();
var listTr=new Array();
var listSort=new Array();
var i=1;
var b=false;
//取得原来的<tr>,并清空<table>
$("#tableNeed tr").each(function(){
listTr.push($(this).html());
});
//得到要排列的列的元素,并在末尾追加此刻的顺序(从1开始)
$(className).each(function(){
listName.push($(this).text()+i);
listNameOld.push($(this).text()+i);
i++;
});
//将要排序的元素排序
mySort(listName);
//判断排序后元素位置是否发生变化
for(var j=0;j<listName.length;j++){
if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){
b=true;
break;
}
}
//排序后,根据先前追加的顺序得到此时<tr>的顺序
for(var j=0;j<listName.length;j++){
listSort.push(parseInt(listName[j].substring(listName[j].length-1)));
}
$("#tableNeed").html('');
//按顺序追加<tr>,若排序后元素顺序未变化,则倒序追加
$("#tableNeed").append("<tr class='header'>"+listTr[0]+"</tr>");
if(b){
for(var j=0;j<listSort.length;j++){
$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
}
}else{
for(var j=listSort.length-1;j>=0;j--){
$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
}
}
}
//首先按字符个数排序,然后按相对应的字符大小排序
function mySort(list){
var len=0;
var add="";
for(var i=0;i<list.length;i++){
var str=list[i];
if(str.length>len){
len=str.length;
}
}
for(var i=0;i<len;i++){
add+="0"
}
for(var i=0;i<list.length;i++){
var strOne=add+list[i];
list[i]=strOne.substring(strOne.length-len);
}
list.sort();
}
//----------------------------
</SCRIPT>
<BODY>
<TABLE id="tableNeed" border=1>
<tr><td onclick="sortt('.1')">数字</td><td onclick="sortt('.2')">字母</td><td onclick="sortt('.3')">数字和字母</td></tr>
<tr><td class="1">11</td><td class="2">ee</td><td class="3">1a</td></tr>
<tr><td class="1">22</td><td class="2">gg</td><td class="3">7g</td></tr>
<tr><td class="1">33</td><td class="2">cc</td><td class="3">d4</td></tr>
<tr><td class="1">44</td><td class="2">aa</td><td class="3">3c</td></tr>
<tr><td class="1">55</td><td class="2">dd</td><td class="3">e5</td></tr>
<tr><td class="1">66</td><td class="2">ff</td><td class="3">f6</td></tr>
<tr><td class="1">77</td><td class="2">hh</td><td class="3">2b</td></tr>
<tr><td class="1">88</td><td class="2">bb</td><td class="3">h8</td></tr>
</TABLE>
</BODY></HTML>

以上所述是小编给大家介绍的JS实现table表格数据排序功能(可支持动态数据+分页效果) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
js实现自定义进度条效果
Mar 15 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JS代码实现table数据分页效果
May 26 #Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 #Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 #Javascript
JavaScript数组的栈方法与队列方法详解
May 26 #Javascript
详解JavaScript中this关键字的用法
May 26 #Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 #Javascript
js操作数据库实现注册和登陆的简单实例
May 26 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
利用 window_onload 实现select默认选择
2006/10/09 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php微信开发自定义菜单
2016/08/27 PHP
php简单压缩css样式示例
2016/09/22 PHP
jQuery 入门讲解1
2009/04/15 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Django开发中的日志输出的方法
2018/07/02 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
Linux文件系统类型
2012/02/15 面试题
自我反省检讨书
2014/01/23 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
2014年物流工作总结
2014/11/25 职场文书
申报优秀教师材料
2014/12/16 职场文书
民政工作个人总结
2015/02/28 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2016银行招聘自荐信
2016/01/28 职场文书