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

时间：2021-05-26

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

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

下面把html的代码贴出来:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML xmlns="http:///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表格数据排序功能(可支持动态数据+分页效果) ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章