"JavaScript" uses the sort () function and the file fragment implementation of the table's front-end ordering, compatible with IE6 primitive ecology

Table sorting in the application of a lot of web pages, especially some of the information system output a dense table for people to see, customers will certainly put forward the requirements of table sorting. Many people think that table sorting must be done through the backend of the database, using the statement with order by Asc/desc to implement it, and then using Ajax seems perfect. In fact, there is no need to deal with the database. Given any table at the front end, you can use the sort () function to sort the front-end of the table with the file fragment implementation. In jquery there is a advancetable plugin to do this, but what about this plugin is rather bad? Like the usual plug-ins, the code is written in the smallpox and Phoenix, without any comments, not a good change, and can not be implemented in any form, any browser. Here is a JavaScript compatible with the IE6 of the original, no plug-in, no connection to the database method to achieve this function.

I. BASIC OBJECTIVES

In the Web page has the following table, click on any of the table header can be sorted, and then click to achieve the reverse order

Second, HTML layout

That's not going to mean nothing. Learning the Web page knows how to complete the table. The only thing to note is to implement the hover mouse hand type representation, put a <a style= "Cursor:pointer" in front and back; ></a> clip on it, do not worry about the click will jump problem, no href attribute will be no problem. Set an ID of mytable for this table to work on later.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Third, core script
The key is for the soft (softfunction ()) Sorting function of the writing, using the idea of file fragmentation, specifically can be seen before I wrote "JavaScript" using file fragments DocumentFragment improved compatible IE6 adjustable and controllable picture slider (Click to open link)
<script>//this thing is used to determine if the reverse is var isasc=true;function sorttable (tableid,col) {isasc=! Isasc;var Dtable=document.getelementbyid (TableID); var dbody=dtable.tbodies[0];//can fetch all the nodes in tbody var datarows= dbody.rows;//is able to fetch all the row nodes inside the tbody, DataRows equivalent to an array//to save the value of the reference array to the normal array operation var myarr=new array (); for (Var i=0;i< datarows.length;i++) {myarr[i]=datarows[i];} Determine if the last sorted column and whether this time is the same column if (Dbody.currentcol==col) {myarr.reverse ();//The array is inverted}else{//javascript the requirement must sort (function ()) Write your own function, write what you think is less than, how is greater than, how is equal to Myarr.sort (//pass over the object is Myarr this array of any two elements tr1 and TR2, row 1 and line 2function Compare (TR1,TR2) {var value1,value2;//If you are now in the sort number, that is, in the comparison ID that column, the leftmost column, the No. 0 column, then I must follow the numbers to handle if (col==0) {///Fetch the custom label of the current row and the custom label on the following line Value1=parseint ( tr1.cells[col].innerhtml); Value2=parseint (tr2.cells[col].innerhtml); if (value1<value2)//-1 represents the former less than the latter return-1; else if (value1>value2)//1 represents the former greater than the latter return 1;else//0 represents two equal values of return 0;} Otherwise, else{//the value in the column to a string and then compare value1=tr1.cells[col].innerhtml+ ""; value2=tr2.cells[col].innerhtml+ "" ;//Direct call to JavaScript's Chinese alignment method, this method can automatically compare the string and return the corresponding resultReturn Value1.localecompare (value2);}); }//Create a document fragment, all the rows are added, the equivalent of a temporary shelf, if directly added to the document.body inside, will be inserted into a row, refresh once, if more data will affect the user experience//first put all the rows in the temporary shelf, and then the temporary shelf inside the row, Added to Document.body so that the table is refreshed only once. Just like when you go to the store to shop, the items you want to buy are all written on the list (document fragments), and then the supermarket is all purchased without thinking of one thing going to Var frag=document.createdocumentfragment (); for (Var i=0;i<myarr.length;i++) {frag.appendchild (myarr[i]);//Add all the rows in the array to the document fragment}dbody.appendchild (Frag);// Adds all the rows in the document fragment to the body dbody.currentcol=col;//records the currently sorted column}</script>
Note: If the cell is not stored in a normal value of what to do, or if there is a bunch of things in the cell, you can give all the cells a custom property, through the comparison of the cell's custom properties, specific reference to the "JavaScript" body in the custom properties of any node (click Open link) after the sorting function to change the value of Tr1.cells[col].getattribute ("") + "", it becomes the value of this custom attribute, this situation is more common in dynamic Web pages inside the big project.
"JavaScript" uses the sort () function and the file fragment implementation of the table's front-end ordering, compatible with IE6 primitive ecology