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中获取选中对象的类型
Apr 02 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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
PHP多个版本的分析解释
2011/07/21 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
js Math 对象的方法
2013/09/01 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
转预备党员政审材料
2014/02/06 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
竞争上岗实施方案
2014/03/21 职场文书
特此通知格式
2015/04/27 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python