"JavaScript" uses sort () functions and file fragments to achieve a table's front-end ordering, compatible with the IE6 of the original ecological __ block chain

Table sorting in the application of the Web page is also a lot, especially some information systems output a dense table for people to see, customers will definitely put forward the requirements of table sorting. Many people think that table sorting must be done through the back-end of the database, using a statement with an order by Asc/desc to implement it, and then using Ajax seems like perfect. In fact, there is no need to deal with the database. Any table on the front end can use the sort () function and the file fragment to implement the front of the table. In jquery there is a advancetable plugin to do this, but the plugin is pretty bad. As with the usual plug-ins, the code written smallpox dragon, no comment, not a good change, and can not be implemented in any form, any browser. The following is a method to implement this function by using JavaScript compatible IE6, no plug-ins, and no connection to database.

I. Basic objectives

The following table in the Web page, click on any one of the header can be sorted, and then click to achieve a reverse order

Second, HTML layout

This is not going to mean nothing. You know how the form is done when you've learned the Web. The only note is that the realization of the hover mouse hand-type expression, before and after putting a <a style= "cursor:pointer;" The ></a> is OK, do not worry about the click will jump the problem, no href attribute is no problem. Set an ID of mytable for this table to make it easier to do things later.

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


third, the core script

The key is to write the soft (softfunction ()) sort function, using the idea of a file fragment, specifically to see what I've written before "JavaScript" using file fragments DocumentFragment improve compatible IE6 tunable picture Sliders (Click to open link)


<script>//This thing is used to judge whether or not to reverse the Var isasc=true; function SortTable (tableid,col) {isasc=!
	ISASC;
	var Dtable=document.getelementbyid (TableID); var dbody=dtable.tbodies[0];//is able to fetch all the nodes in the Tbody, VAR datarows=dbody.rows;//can fetch all the row nodes within the tbody, and the DataRows is equivalent to an array//
	The value of the reference array is saved 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 this time is the same column if (Dbody.currentcol==col) {myarr.reverse ();//Invert the array} else{//javascript requires sort (function ()) to own
				Write than the function, write you think how 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 row 2 function compare (TR1,TR2) {
				var value1,value2; If you are now in the sort number, which is in the comparison ID that column, the leftmost column, the No. 0 column, then I have to follow the numbers to process if (col==0) {//Take 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 values equal return 0; }//Otherwise, follow the stringTo arrange else{///To convert the values in a column to a string and then compare value1=tr1.cells[col].innerhtml+ "";
					Value2=tr2.cells[col].innerhtml+ "";
				Directly invoke JavaScript's Chinese alignment method, which can be automatically compared to the string and returns the corresponding result of return 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 insert a row, the refresh once, if the data will affect the user experience//first of all put the line in the temporary shelf inside, and then the row inside the shelf,
	Add to document.body together so that the table is refreshed only once. 
	Just like when you go to the store to shop, all the items you want to buy are written on the list (document fragments), and then the supermarket buys all of them without thinking about one thing. var frag=document.createdocumentfragment (); for (Var i=0;i<myarr.length;i++) {frag.appendchild (myarr[i]);//Add all rows in the array to the document fragment} dbody.appendchild (Frag); Add all the rows in the document fragment to the body dbody.currentcol=col;//the column currently sorted under the record </script>
Note: What if the cell is not stored in a normal value? or a cell with a bunch of things, you can assign a custom attribute to all cells, and you can refer to the custom properties of any node in the "JavaScript" body by using the custom attribute of the cell. (Click on the link to open) after the sorting function of the value of the Tr1.cells[col].getattribute ("") + "" can be compared to the value of this custom attribute, this situation is more common in dynamic Web pages inside the big project.