JavaScript implements table sorting for client pages

Long time no write Bo, has been too busy: into the second half of the semester, four times a week, every day to prepare lessons, a little time on the rush, no time to write. Still, the client page that you just resolved is sorted by JavaScript-implemented tables, or recorded.

Requirements background: A statistical function in the system, slower, according to the previous practice, is by the result table header text as a link to the server to submit sorted column name and sort method (ascending/descending), and then return the results from the service side to implement the sort. However, this method is undoubtedly inefficient, which aggravates the burden of network communication and server. Then consider using JavaScript to sort the list of results on the client page.

To tell the truth, this method has not been really contacted before, the Internet check, found that in fact, is not a fresh way. Can find a lot, I think cloudgamer done very well (http://www.cnblogs.com/cloudgamer/archive/2008/10/06/1304414.html), implemented to include check boxes, The sort of table columns of various types, including the column of a single selection box. Unfortunately, there was no application success in my project and I didn't know it was related to using RJs in rails. Later, we found a way to move the rows in the table using the Moverows method in JavaScript, and there was a ready-made code available. However, it is found that the code simply reverses the order of the rows, and cannot really sort the unordered rows. But the method is illuminating. Finally, combining with the JavaScript implementation of the online search algorithm, I finally realized the sorting method for this project.

The code is as follows:

1, the page call sorting function. where sorttype=1 represents descending,-1 is ascending; Bubblesort is bubble sort.

Parameters: Ncolnum is the column ordinal (starting from 0), Strdatatype is the sort of data type, such as int, float, and so on.

var sorttype = 1; desc function Sortbycol (ncolnum,strdatatype) {//Sort var table = document.getElementById ("Tblresult");//Go to table Bubblesort (Table,ncolnum,strdatatype,sorttype); SortType = 0-sorttype; ASC}

2, bubble sort function.

Parameters: Table is the form to be sorted, Ncolnum is the column ordinal (starting from 0), Strdatatype for the sorted data type, such as int, float, and so on, and then the corresponding type conversion is done according to different data types in the function, and then compared.

Other: The function is to sort the specified column (ncolnum) of the sorted table (table) in a certain data type (Strdatatype) according to the passed parameters, sorted by bubble sort according to the specified sort method (Nsortorder, ascending/descending). It takes a statement like "Table.rows[j].cells[ncolnum].childnodes[0].data" to get the data from a cell in a row in the table. When two rows are exchanged, the swap function is called. In this function, the int, float type of data is made explicit conversion, according to the specific requirements, can continue to expand.

Another point to note is the for (Var i=1;i<length;i++) Loop: Because the first row of the table is the column name (the header), the loop starts from the I=1 instead of the i=0.

function Bubblesort (table,ncolnum,strdatatype,nsortorder) {//bubble sort var length=table.rows.length; for (Var i=1;i< length;i++) {//Because there is a row in the header, I am starting from 1 var exchanged=false; for (var j=length-1;j>i;j--) {switch (strdatatype) {case "int": if (nsortorder>0) {//desc if (parseint (table.rows[j].cells[ncolnum].childnodes[0].data) > parseint (table.rows[j-1].cells[ncolnum) . Childnodes[0].data)) {Swap (table,j,j-1); Exchanged=true}} else{if (parseint (Table.rows[j].cells[ncolnum].childnodes[0].data) < parseint (Table.rows[j-1].cells[ncolnum). Childnodes[0].data)) {Swap (table,j,j-1); Exchanged=true}} Break Case "Float": if (nsortorder>0) {//desc if (parsefloat (Table.rows[j].cells[ncolnum].childnodes[0].data) > Parsefloat (Table.rows[j-1].cells[ncolnum].childnodes[0].data)) {Swap (table,j,j-1); exchanged=true;}} else{if (parsefloat (Table.rows[j].cells[ncolnum].childnodes[0].data) < parsefloat (table.rows[j-1].cells[ Ncolnum].childnodes[0].data)) {Swap (table,j,j-1); Exchanged=true}} Break; Case "string": Default:if (nsortorder>0) {//desc if (table.rows[j].cells[ncolnum].childnodes[0].data.tostring () > table.rows[j-1].cells[ncolnum].childnodes[0].data.tostring ()) {Swap (table,j,j-1); Exchanged=true}} else{if (table.rows[j].cells[ncolnum].childnodes[0].data.tostring () < Table.rows[j-1].cells[ncolnum]. Childnodes[0].data.tostring ()) {Swap (table,j,j-1); Exchanged=true}} }//switch}//for J if (!exchanged) break; }//for i}

3, the function of exchanging table rows.

Parameters: Table is the form to exchange rows, and I, J is the two line number to swap.

This function is to make full use of the table elements of the Moverow method, to achieve the exchange of two lines of position. The first parameter of the method is the line number to move, and the second parameter is the line number of the moving target position. When this function moves a row, the position of the other rows is adjusted accordingly. Depending on the size of I and J, two different operations, such as those written in the function, are to be made to achieve the purpose of the final exchange of two lines. The process is simple, and you can understand it by drawing a picture on a piece of paper.

function Swap (table,i,j) {if (i<0 | | j>table.rows.length-1) return; if (i<j) {table.moverow (i,j); Table.moverow (J-1,i); } else{Table.moverow (i,j); Table.moverow (j+1,i);}

Finally, you can call the Sortbycol function by making a link to the table's sortable column name on the page, such as:

<th nowrap>
<a href= "#" onclick= "Sortbycol (0);" > Discipline Code </a>
</th>

Depending on the switch in the Bubblesort function, no data type (that is, the second argument) is specified by default, sorted by string type. The following are the data types specified:

<th nowrap>
<a href= "#" onclick= "Sortbycol (2, ' float ');" > percent (%) </a>
</th>

Then there is, can also be used to quickly sort other sorting methods to achieve, the corresponding algorithm online is also very easy to find, do a corresponding transformation can be.

Because of the actual application, the results are not paged, so the three functions do not implement the sorting of paging data.

The generality of this method has not been examined carefully and is left to be used on other pages later.

JavaScript is powerful and there's a lot to learn.