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

《JS实现table表格数据排序功能(可支持动态数据+分页效果)_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、JS实现table表格数据排序功能(可支持动态数据+分页效果)_这篇文章主要介绍了JS实现table表格数据排序功能(可支持动态数据+分页效果)的相关资料，特别不错，具有参考借鉴价值，需要的伴侣一起看看吧asp.net会常常遇到分页的效果,尤其是盼望实现静态的html分页排序(html分页信任大家都已经有自己的解决方案.在这里就不多说).我写了一个简洁的Demo排序.数据就是字母和数字两组.(汉字需要找到asc码)原理就是利用数组自带的sort排序,进行表格重组.已在.netmvc中测试过.支持分页.(申明一点.只对当前页面数据排序无刷新,对全部页面排

2、序的话,确定需要刷新.这点我还在解决中.)盼望有新想法的高手们,给下教导.下面把html的代码贴出来:!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"HTMLxmlns="l"HEADTITLEjs操作刷新/TITLEMETAhttp-equiv=Content-Typecontent="text/html;charset=utf-8";scriptlanguage="javaScript"src="l());});//得到要排列的列的元素，并在末尾追加此刻的挨次（从1开头）$(classNa

3、me).each(function(){listName.push($(this).text()+i);listNameOld.push($(this).text()+i);i++;});//将要排序的元素排序mySort(listName);//推断排序后元素位置是否发生改变for(varj=0;jlistName.length;j++){if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){b=true;break;}}//排序后，依据

4、从前追加的挨次得到此时tr的挨次for(varj=0;jlistName.length;j++){listSort.push(parseInt(listName[j].substring(listName[j].length-1)));}$("#tableNeed").html('');//按挨次追加tr，若排序后元素挨次未改变，则倒序追加$("#tableNeed").append("trclass='header'"+listTr[0]+"/tr");if(b){for(varj=0;jlistSort.length;j++){$("#tableN

5、eed").append("tr"+listTr[listSort[j]]+"/tr");}}else{for(varj=listSort.length-1;j=0;j--){$("#tableNeed").append("tr"+listTr[listSort[j]]+"/tr");}}}//首先按字符个数排序，然后按相对应的字符大小排序functionmySort(list){varlen=0;varadd="";for(vari=0;ilist.length;i++){varstr=list[i];if(str.lengthlen){len=st

6、r.length;}}for(vari=0;ilen;i++){add+="0"}for(vari=0;ilist.length;i++){varstrOne=add+list[i];list[i]=strOne.substring(strOne.length-len);}list.sort();}//----------------------------/SCRIPTBODYTABLEid="tableNeed"border=1trtdonclick="sortt('.1')"数字/tdtdonclick="sortt('.2')"字母/tdtdo

7、nclick="sortt('.3')"数字和字母/td/trtrtdclass="1"11/tdtdclass="2"ee/tdtdclass="3"1a/td/trtrtdclass="1"22/tdtdclass="2"gg/tdtdclass="3"7g/td/trtrtdclass="1"33/tdtdclass="2"cc/tdtdclass="3"d4/td/trtrtdclass="1"44/tdtdclass="2"aa/tdtdclass="3"3c/td/trtrtdclass="1"55/tdtdclass="2"dd/tdtd

8、class="3"e5/td/trtrtdclass="1"66/tdtdclass="2"f