JS实现table表格数据排序(可支持动态数据+分页效果)
2011-11-03 10:48
1316 查看
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>
下面把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表格数据排序功能(可支持动态数据+分页效果)
- 用table,js实现web动态取数据并实现分页效果
- 用table,js实现web动态取数据并实现分页效果
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS 实现简单的Table表格分页效果(假分页)
- js表格排序(支持int,float,date,string四种数据类型)
- JS组件Bootstrap Table表格行拖拽效果实现代码
- JS实现点击Radio动态更新table数据
- JS 排序输出实现table行号自增前端动态生成的tr
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- 一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js(附ajax例子)
- js表格排序实例分析(支持int,float,date,string四种数据类型)
- 动态生成table并实现分页效果
- js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写),实现行与行之的颜色相间,高光的效果
- 基于Dapper实现分页效果 支持筛选、排序、结果集总数等
- JS实现动态生成表格并提交表格数据向后端
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 动态生成table并实现分页效果心得分享