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>11</td><td>ee</td><td>1a</td></tr><tr><td>22</td><td>gg</td><td>7g</td></tr><tr><td>33</td><td>cc</td><td>d4</td></tr><tr><td>44</td><td>aa</td><td>3c</td></tr><tr><td>55</td><td>dd</td><td>e5</td></tr><tr><td>66</td><td>ff</td><td>f6</td></tr><tr><td>77</td><td>hh</td><td>2b</td></tr><tr><td>88</td><td>bb</td><td>h8</td></tr></TABLE></BODY></HTML>以上所述是小編給大家介紹的JS實現table表格數據排序功能(可支持動態數據+分頁效果) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！