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

前端技术 2023/09/04 JavaScript

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

本文地址：https://www.stayed.cn/item/11628

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案