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 相关文章推荐
动态加载iframe
Jun 16 Javascript
为数据添加append,remove功能
Oct 03 Javascript
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 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中require和require_once的区别说明
2014/02/27 PHP
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
React优化子组件render的使用
2019/05/12 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python注释详解
2016/06/01 Python
python距离测量的方法
2018/03/06 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
int在python中的含义以及用法
2019/06/27 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
医大实习自我鉴定
2013/12/07 职场文书
上班迟到检讨书
2014/01/10 职场文书
初中班级口号
2014/06/09 职场文书
门面房租房协议书
2014/08/20 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
自我评价优缺点范文
2015/03/11 职场文书
亲情作文之母爱
2019/09/25 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
python 提取html文本的方法
2021/05/20 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技