Asp.net often encounters pagination effects, especially hoping to achieve static html paging sorting (I believe everyone has their own solutions for html paging. I won't say much about it here). I wrote a simple demo sorting.
The data is two sets of letters and numbers. (Chinese characters need to find the Asc code) The principle is to use the sort sorting provided by the array to reorganize the table. It has been tested in .net mvc. It supports pagination. (Accounting for a point. Only sorting the current page data without refresh. If you sort all pages, you will definitely need to refresh. I am still solving this point.) I hope experts with new ideas will give you some advice.
The following is the html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>js operation refresh</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>//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Array();var i=1;var b=false;//Get the original <tr> and clear the <table>$("#tableNeed tr").each(function(){listTr.push($(this).html());});//Get the element of the column to be arranged, and add the order of the moment at the end (starting from 1)$(className).each(function(){listName.push($(this).text()+i);listNameOld.push($(this).text()+i);i++;});//Sort the elements to be sorted mySort(listName);//Judge whether the element position changes after sorting for(var j=0;j<listName.length;j++){if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){b=true;break;}}//After sorting, get the order of <tr> at this time based on the previous appended order for(var j=0;j<listName.length;j++){listSort.push(parseInt(listName[j].substring(listName[j].length-1)));}$("#tableNeed").html('');//Add <tr> in order. If the order of elements does not change after sorting, then add $("#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>");}}}//First sort by number of characters, and then sort by corresponding character size 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')">number</td><td onclick="sortt('.2')">Letters</td><td onclick="sortt('.3')">Numbers and letters</td></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><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>The above is the JS implementation of table table data sorting function (can support dynamic data + paging effects) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!