JS sorts the array Array

There is an sort () method in the JS array. The default is to sort by ASCII character order in ascending order. The sort (sortfun) method can take over a method as a parameter. This method has two parameters: representing the two array items during each sort comparison. In sort () sorting, this parameter should be fulfilled for each Comparison of Two array items, and the two compared array items should be passed to this function as parameters. When the return value of the function is 1, the order of the two array items will be exchanged, otherwise it will not be exchanged.

Code:

VaR arr = [56,100, 7,562,]; arr. sort (); // After the sort method is called, the array itself will be changed, that is, the original array alert (ARR. join (","); // 10,100, 56,562, 5, 50, 51, 7 do not follow the number size sorting arr. sort (function (a, B) {return A> B? 1:-1}); // sort alert (ARR. join (","); // 100,562. sort (function (a, B) {return a <B? 1:-1}); // sort alert (ARR. join (","); // 562,100, 0

Conclusion:
1. After the sort method is called for an array, it will affect itself (instead of generating a new array)
2. The sort () method is sorted by characters by default. Therefore, when sorting a numeric array, you cannot take it for granted that it will be sorted by numbers!
3. To change the default sort action (sort by characters), you can specify the sort rule function (as shown in this example)

The following is an example of custom sorting, Which is sorted by the two-dimensional array in various style formats:
VaR arr = new array ();
Arr [0] = new array ("e", 2, "" dfg "");
Arr [1] = new array ("B" ", 3," "bcfgf "");
Arr [2] = new array ("" A "", 1, "" za "");
Arr [3] = new array ("" D "", 4, "" ehfg "");
Arr. Sort (sortfun );
Alert (ARR [0] + "---" + arr [1] + "---" + arr [2] + "---" + arr [3])
Function sortfun (x, y) {// sort by the ASCII code of the first letter in the third column of the Two-dimensional array in ascending order
Return X [2]. charcodeat (0)-y [2]. charcodeat (0 );
}
Function sortfun (x, y) {// sort by the number in the second column of the Two-dimensional array in ascending order
Return X [1]-y [1];

}

Reprinted from: http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2012/0303/23673.html

Here is an example of my actual project (Ajax implementation ):

Background code:

/*** Query employee names (employee names can have duplicate names) * @ Param staff_name: employee name */Public void selectstaffbyname (string staff_name) {list 
Front-end JS Code (assuming I want to sort and display by employee number ):

VaR isnumberclickodd = true; // used to record Positive Sorting when the first click, and then reverse sorting function selectallorderbynumber () {curpage = 1; if (isnumberclickodd) {lists. sort (function Order (x, y) {return X. staff. staff_number-y. staff. staff_number; // main code !}); Isnumberclickodd = false;} else if (! Isnumberclickodd) {lists. Sort (function Order (x, y) {return Y. Staff. staff_number-X. Staff. staff_number; // main code !}); Isnumberclickodd = true;} fenye (); // call the paging display function}
Paging function code:

VaR pagesize = 14; // the size of each page var curpage = 1; // the current page, the first page var pagetotal by default; // The total page number function fenye () {// set the total number of pages document. getelementbyid ("pagetotal "). innerhtml = pagetotal; // update the current page number document. getelementbyid ("pagecur "). innerhtml = curpage; // alert ("Current page:" + curpage); var pagelist = new array (); // listvar min = (pagesize * curpage) for each page) -pagesize; var max = pagesize * curpage; If (curpage = pagetotal) {max = lists. length;} For (VAR I = min; I <Max; I ++) {var staffview = lists [I]; pagelist [I-min] = staffview ;} innerhtml (pagelist); // call the function shown as a table-like function}
Innerhtml functions:
/*** Used to display the list staffs to be displayed * @ Param staffviewlist * @ return */function innerhtml (staffviewlist) {var result = "<Table Style = 'background-color: # def2f9; width: 1230px 'cellspacing = '1'> "+" <tr> "+" <TD> "+" <Table id = 'table _ result'> "; result + = "<tr>" + "<TH style = 'width: 40px 'class = 'td' onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> serial number </Th> "+" <TH style = 'width: 70px 'class = 'td 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this ); '> name </Th> "+" <TH style = 'width: 90px' class = 'td 'onclick = 'selectallorderbynumber (); 'onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> employee ID </Th> "+" <TH style = 'width: 90px 'class = 'td 'onclick = 'selectallorderbydept (); 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this ); '> Department </Th> "+" <TH style = 'width: 80px' class = 'td 'onclick = 'selectallorderbyjob (); 'onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> position </Th> "+" <TH style = 'width: 80px' class = 'td 'onclick = 'selectallorderbylevel (); 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this); '> skill level </Th> "+" <TH style = 'width: 100px 'class = 'td 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this ); '> contact number </Th> "+" <TH style = 'width: 80px' class = 'td 'onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> nationality </Th> "+" <TH style = 'width: 120px 'class = 'td 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this ); '> Current address </Th> "+" <TH style = 'width: 80px' class = 'td 'onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> In-service status </Th> "+" <TH style = 'width: 90px 'class = 'td 'onclick = 'selectallorderbystartdate (); 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this ); '> Start time </Th> "+" <TH style = 'width: 90px' class = 'td 'onmouseover = 'changecolorline (this ); 'onmouseout = 'restorecolor (this); '> departure time </Th> "+" <TH style = 'width: 150px 'class = 'td 'onmouseover = 'changecolorline (this); 'onmouseout = 'restorecolor (this);'> ID card number </Th> "+" </tr> "; for (VAR I = 0; I <staffviewlist. length; I ++) {result + = "<tr id =" + staffviewlist [I]. staff. staff_id + "ondblclick = 'newpage (this. ID) '"+" onmouseover = 'changecolor (this);'> "; Result + =" <TD class = 'td '> "+ (I + 1) + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_name + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_number + "" + "</TD>"; Result + = "<TD class = 'td '>" + showlowdeptname (staffviewlist [I]. dept. dept_name, staffviewlist [I]. dtwo. dtwo_name, staffviewlist [I]. dthree. dthree_name) + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. job. job_name + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. level. level_name + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_phone + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_nativeplace + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_address + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_state + "" + "</TD>"; Result + = "<TD class = 'td '>" + timestamp2string (staffviewlist [I]. staff. staff_startdate.time) + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_enddate + "" + "</TD>"; Result + = "<TD class = 'td '>" + staffviewlist [I]. staff. staff_idcard + "" + "</TD>"; Result + = "</tr> ";} result + = "</table> </TD> </tr> </table>"; document. getelementbyid ("div_select_result "). innerhtml = result ;}