Jquery-based table sorting

Many experts have written specialized sorting libraries for jquery, because they also want to try it,
Of course, the running speed is unacceptable, but I will gradually improve it.
Note: Some code is provided here to view the demo.
Add a click event to 'th' after the file is loaded.
1.
$ ('Th'). click (function (){
Var date1 = (new Date (). getTime ()
Var dataType = $ (this). attr ('ype ype ');
Find the custom attribute ype of the clicked object. Of course, this does not comply with W3C standards and cannot be verified. You can also use ID or class to define it, however, I think this idea can be interpreted normally in the Transitional mode.
2.
Var index = $ ('th'). index (this) + 1;
Add 1 to the position of the clicked object in the document and 1 to add a style to the td of the corresponding column.
Because eq () can be used only to obtain the full file location of td, and nth-child () can be used to obtain the sequence location of each td in its parent element.
3.
Var row = $ ('tbody tr ');
Store all tr in tbody to the variable row.
4.
$. Each (row, function (I) {arr [I] = row [I]})
To traverse all rows, insert the arr array.

5. if ($ (this). hasClass ('select') {arr. reverse ()}
If this 'th' is clicked, it will be added with the select style. If so, the original arr array will be reversed.
6.
Else {
Arr. sort (sortStr (index, dataType ))
$ ('. Select'). removeClass ();
$ ('Td: nth-child ('+ index +'). addClass ('select ');
$ (This). addClass ('select ')
}
Otherwise, arr can use the sort () method to sort () to accept one function. This function accepts two parameters as the data to be compared. Here I define it
SortStr ();
It has two parameters:
Copy codeThe Code is as follows:
Function sortStr (index, dataType ){
Return function (a, B ){
Var aText = $ (a). find ('td: nth-child ('+ index +'). text ();
Var bText = $ (B). find ('td: nth-child ('+ index +'). text ();

If (dataType! = 'Hosttype '){
AText = Parse (aText, dataType)
BText = Parse (bText, dataType)
Return aText>; bText? -1: bText>; aText? 1:0;

}
Else return aText. localeCompare (bText)
}
}


The first one is index, which is the variable obtained in the click event. This variable contains the clicked 'th' position in the document as a number,
The index () method of jquert obtains the object location, which starts from 0. In this example, there are 6 'th ';

The second parameter is dataType, which contains the attribute values of each 'th.

SortStr () contains a comparison function, which is an anonymous function. It has two parameters, each representing a 'tbody tr ', (Here, a and B represent the tr to be compared.) These two parameters are obtained in the environment containing their functions. The parameters in the sort () method are a function, this function will get the elements of the array object,
This anonymous function returns a reference to the Operation Array.
Arr contains an array. The values of each array contain references to tr in the tbody. The ordering function directly changes the position of elements in the original array according to the returned values,

Var aText = $ (a). find ('td: nth-child ('+ index +'). text ();
Obtain the text contained in one td in the row to be compared. This is the value to be compared,
The index variable obtained in the click event is passed as a parameter to get the location of the td corresponding to th;
Copy codeThe Code is as follows:
If (dataType! = 'Hosttype '){
AText = Parse (aText, dataType)
BText = Parse (bText, dataType)
Return aText>; bText? -1: bText>; aText? 1:0;
}

If the data to be sorted does not contain numbers or letters (because the elements with the specified value include numbers and letters ), pass the text value and ype in the obtained td
Convert in Parse,
Copy codeThe Code is as follows:
Function Parse (data, dataType ){
Switch (dataType ){
Case 'num ':
Return parseFloat (data) | 0
Case 'date ':
Return Date. parse (data) | 0
Default:
Return splitStr (data)
}
}

If the numeric type is directly converted to a floating point number,

Return parseFloat (data) | 0
If the string of the converted object of boun appears, 0 is returned. Because there is a NaN in this document that cannot be converted, 0 is returned;

If it is a Date type, you can use Date. parse to directly convert it to a number, which is the time from January 1, 1970 to the conversion parameter,
I tried to convert the time to seconds. For example, the write methods at 18:12:20 and 18:12:20 can be converted;
After

Return aText>; bText? -1: bText>; aText? 1:0;
If the comparison value aText is greater than bText, any number smaller than 0 is returned. If none, a positive number is returned. If none, 0 is returned; if it is not a date or a number (in this document, only data in 3 can be converted: 1. date. 2. Number. 3. String and number ),
Default:
Return splitStr (data)
I put it in splitStr () for conversion.

The content of splitStr () is as follows:
Copy codeThe Code is as follows:
Function splitStr (data ){
Var re =/^ [\ $ a-zA-z \ u4e00-\ u9fa5] * (. *?) [A-zA-z \ u4e00-\ u9fa5] * $/
Data = data. replace (re, '$1 ')
Return parseFloat (data)
}

Regular Expression: divided into three parts: 1 part ^ [a-zA-Z] *; middle part (.*?); End part [a-zA-Z] * $
It can be seen that // contains a block,
The first part ^ indicates the start of the target string, [] indicates that the A-Z is ignored regardless of case, there is a space in it, * indicates that the content in the left [] can appear any number of times;
The middle part () is a group. The group content will be placed in '$ 1','. 'In the first item of RegExp to match all (except spaces )*? Laziness;
The last part [] is the same as the last part * and the first part. It removes letters and $ indicates the end part;
\ $ Indicates matching $
Copy codeThe Code is as follows:
Function sortStr (index, dataType ){
Return function (a, B ){
Var aText = $ (a). find ('td: nth-child ('+ index +'). text ();
Var bText = $ (B). find ('td: nth-child ('+ index +'). text ();
If (dataType! = 'Hosttype '){
AText = Parse (aText, dataType)
BText = Parse (bText, dataType)
Return aText>; bText? -1: bText>; aText? 1:0;
}
Else return aText. localeCompare (bText)
}
}

Otherwise, use localeCompare to compare the strings. This is a special method for comparing strings. For example, the string 'A' is placed before the string 'B' and; the returned values are still greater than 0, negative and 0;

The new Date at the beginning of the Code and the new Date at the end of the Code are used to calculate the table sorting time, which will be displayed in the 'span 'Mark of the 'th' in the middle, this is the time it takes to test the sorting of the entire table from the sorting start to the sorting end.

Complete code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> table sorting </title>
<Script src = "../jquery1.2.6.min. js"> </script>
<Script language = "javascript" type = "text/javascript">

$ (Function (){
$ ('Th'). click (function (){
Var date1 = (new Date (). getTime ()
Var dataType = $ (this). attr ('ype ype ');
Var index = $ ('th'). index (this) + 1;
Var arr = [];
Var row = $ ('tbody tr ');
$. Each (row, function (I) {arr [I] = row [I]})
If ($ (this). hasClass ('select ')){
Arr. reverse ()
}
Else {
Arr. sort (sortStr (index, dataType ))
$ ('. Select'). removeClass ();
$ ('Td: nth-child ('+ index +'). addClass ('select ');
$ (This). addClass ('select ')
}
Var fragment = document. createDocumentFragment ()
$. Each (arr, function (I ){
Fragment. appendChild (arr [I])
})
// $ ('Tbody'). remove ();
// $ ('Table'). append ('<tbody> </tbody> ')
// Each (arr, function (o) {fragment. appendChild (o )})
$ ('Tbody'). append (fragment)
Var date2 = (new Date (). getTime ()
$ ('Th span '). text (date2-date1)
})
})

Function sortStr (index, dataType ){
Return function (a, B ){
Var aText = $ (a). find ('td: nth-child ('+ index +'). text ();
Var bText = $ (B). find ('td: nth-child ('+ index +'). text ();

If (dataType! = 'Hosttype '){
AText = Parse (aText, dataType)
BText = Parse (bText, dataType)
Return aText> bText? -1: bText> aText? 1:0;
}
Else return aText. localeCompare (bText)
}
}
Function Parse (data, dataType ){
Switch (dataType ){
Case 'num ':
Return parseFloat (data) | 0
Case 'date ':
Return Date. parse (data) | 0
Default:
Return splitStr (data)
}
}
Function splitStr (data ){
Var re =/^ [\ $ a-zA-z \ u4e00-\ u9fa5] * (. *?) [A-zA-z \ u4e00-\ u9fa5] * $/
Data = data. replace (re, '$1 ')
Return parseFloat (data)
}

// Web Development Exchange blog document source: mickey, Author: www.mymickey.org
// Reprinted with the source
</Script>
<Style type = "text/css">
Table {
Text-align: center;
Border: 1px # ccc solid;
Border-collapse: collapse;
Width: 700px;
Font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Color: #666;
}
Tr {
Border-bottom: 1px # ccc solid;
}
Td {
Padding:. 3em 0. 3em 0;
}
Th {
Cursor: pointer;
Background: url(room-bg.gif) 0-13px repeat-x;
Height: 30px;
Color: #009;
}
Td. select {
Color: #000;
}
Th. select {
Background-image: none;
Background-color: # C4D5D9;
}
Span {
}
</Style>
</Head>
<Body>
<A href = "http://www.mymickey.org" style = "font-size: 14px; color: # F60"> return to article </a>

<Table>
<Thead>
<Tr>
<Th dataType = "roomNum"> room number </th>
<Th dataType = "date"> date </th>
<Th dataType = "roomType"> room type <span> </th>
<Th dataType = "num"> bed </th>
<Th dataType = "container"> capacity </th>
<Th dataType = "Float"> price/night </th>
<Th dataType = "Float"> total </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> u0628 </td>
<Td> 9/14/2008 </td>
<Td> Std Hotel Room 2 Double (27 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $109.00 </td>
<Td> $436.00 </td>
</Tr>
<Tr>
<Td> u0631 </td>
<Td> 10/4/2008 </td>
<Td> Lodge Rm/Shared Bath Q (4 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $109.00 </td>
<Td> $436.00 </td>
</Tr>
<Tr>
<Td> u0636 </td>
<Td> 9/18/2008 </td>
<Td> Std Hotel Room Q (34 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $117.00 </td>
<Td> $466.00 </td>
</Tr>
<Tr>
<Td> u0638 </td>
<Td> 9/19/2008 </td>
<Td> Std Hotel Room 2 Q (28 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $117.00 </td>
<Td> $466.00 </td>
</Tr>
<Tr>
<Td> u0612 </td>
<Td> 9/1/2008 </td>
<Td> Studio Condo (10 left) </td>
<Td> 1 </td>
<Td> 4 persons </td>
<Td> $149.00 </td>
<Td> $596.00 </td>
</Tr>
<Tr>
<Td> u0626 </td>
<Td> 9/13/2008 </td>
<Td> Hotel Jr Suite K (4 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $149.00 </td>
<Td> $596.00 </td>
</Tr>
<Tr>
<Td> u0641 </td>
<Td> 9/22/2008 </td>
<Td> Hotel Superior K (26 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $149.00 </td>
<Td> $596.00 </td>
</Tr>
<Tr>
<Td> u0602 </td>
<Td> 8/31/2008 </td>
<Td> 1 Bdrm Condo K (96 left) </td>
<Td> 1 </td>
<Td> 4 persons </td>
<Td> $169.00 </td>
<Td> $676.00 </td>
</Tr>
<Tr>
<Td> u0616 </td>
<Td> 10/8/2008 </td>
<Td> Studio Condo Murphy (5 left) </td>
<Td> NaN </td>
<Td> 4 persons </td>
<Td> $169.00 </td>
<Td> $676.00 </td>
</Tr>
<Tr>
<Td> u0623 </td>
<Td> 10/2/2008 </td>
<Td> Studio Cabin Q (6 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $169.00 </td>
<Td> $676.00 </td>
</Tr>
<Tr>
<Td> u0633 </td>
<Td> 9/16/2008 </td>
<Td> Studio Q/Murphy (6 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $169.00 </td>
<Td> $676.00 </td>
</Tr>
<Tr>
<Td> u0637 </td>
<Td> 10/5/2008 </td>
<Td> Lodge Room Q (4 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $169.00 </td>
<Td> $676.00 </td>
</Tr>
<Tr>
<Td> u0622 </td>
<Td> 9/11/2008 </td>
<Td> Hotel Loft Ste K/Q (3 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $179.00 </td>
<Td> $716.00 </td>
</Tr>
<Tr>
<Td> u0629 </td>
<Td> 10/10/2008 </td>
<Td> 1 Bdrm Condo K (76 left) </td>
<Td> 1 </td>
<Td> 4 persons </td>
<Td> $179.00 </td>
<Td> $716.00 </td>
</Tr>
<Tr>
<Td> u0603 </td>
<Td> 9/8/2008 </td>
<Td> Hotel Loft K/Q (16 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $189.00 </td>
<Td> $756.00 </td>
</Tr>
<Tr>
<Td> u0632 </td>
<Td> 9/15/2008 </td>
<Td> Hotel Loft K/2 T (15 left) </td>
<Td> 3 </td>
<Td> 4 persons </td>
<Td> $189.00 </td>
<Td> $756.00 </td>
</Tr>
<Tr>
<Td> u0619 </td>
<Td> 10/1/2008 </td>
<Td> Studio Cabin Firepl K (6 left) </td>
<Td> 1 </td>
<Td> 2 persons </td>
<Td> $209.00 </td>
<Td> $836.00 </td>
</Tr>
<Tr>
<Td> u0608 </td>
<Td> 10/7/2008 </td>
<Td> 1 Bdrm Condo with Den K (1 left) </td>
<Td> 1 </td>
<Td> 6 </td>
<Td> $222.00 </td>
<Td> $886.00 </td>
</Tr>
<Tr>
<Td> u0620 </td>
<Td> 9/5/2008 </td>
<Td> 2 Bdrm Condo K/K (25 left) </td>
<Td> 2 </td>
<Td> 6 </td>
<Td> $229.00 </td>
<Td> $916.00 </td>
</Tr>
<Tr>
<Td> u0630 </td>
<Td> 9/7/2008 </td>
<Td> 2 Bdrm Condo K/2 T (57 left) </td>
<Td> 3 </td>
<Td> 6 </td>
<Td> $229.00 </td>
<Td> $916.00 </td>
</Tr>
<Tr>
<Td> u0634 </td>
<Td> 10/11/2008 </td>
<Td> 2 Bdrm Condo K/Q (88 left) </td>
<Td> 2 </td>
<Td> 6 </td>
<Td> $229.00 </td>
<Td> $916.00 </td>
</Tr>
<Tr>
<Td> u0639 </td>
<Td> 9/20/2008 </td>
<Td> 1 Bdrm K/Murphy (19 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $229.00 </td>
<Td> $916.00 </td>
</Tr>
<Tr>
<Td> u0614 </td>
<Td> 9/2/2008 </td>
<Td> 2 Bdrm Townhome (7 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $239.00 </td>
<Td> $956.00 </td>
</Tr>
<Tr>
<Td> u0610 </td>
<Td> 9/10/2008 </td>
<Td> 1 Bdrm Loft K/Q + 2 T/Murphy (5 left) </td>
<Td> 5 </td>
<Td> 8 persons </td>
<Td> $269.00 </td>
<Td> $1076.00 </td>
</Tr>
<Tr>
<Td> u0625 </td>
<Td> 9/12/2008 </td>
<Td> 2 Bdrm K/Q/Murphy (6 left) </td>
<Td> 3 </td>
<Td> 6 </td>
<Td> $269.00 </td>
<Td> $1076.00 </td>
</Tr>
<Tr>
<Td> u0640 </td>
<Td> 9/21/2008 </td>
<Td> Exec. 2 Bdrm K/2Q/Murphy (2 left) </td>
<Td> 4 </td>
<Td> 8 persons </td>
<Td> $269.00 </td>
<Td> $1076.00 </td>
</Tr>
<Tr>
<Td> u0606 </td>
<Td> 9/26/2008 </td>
<Td> 2 Bdrm Cabin K/Q + T (2 left) </td>
<Td> 3 </td>
<Td> 5 </td>
<Td> $279.00 </td>
<Td> $1116.00 </td>
</Tr>
<Tr>
<Td> u0613 </td>
<Td> 9/29/2008 </td>
<Td> Lodge 2 Bdrm Suite Q/Q (1 left) </td>
<Td> 2 </td>
<Td> 4 persons </td>
<Td> $279.00 </td>
<Td> $1116.00 </td>
</Tr>
<Tr>
<Td> u0624 </td>
<Td> 10/3/2008 </td>
<Td> 1 Bdrm Cabin Firepl K (3 left) </td>
<Td> 1 </td>
<Td> 4 persons </td>
<Td> $279.00 </td>
<Td> $1116.00 </td>
</Tr>
<Tr>
<Td> u0618 </td>
<Td> 9/4/2008 </td>
<Td> 2 Bdrm Condo w/Den Custom (1 left) </td>
<Td> 2 </td>
<Td> 6 </td>
<Td> $329.00 </td>
<Td> $1316.00 </td>
</Tr>
<Tr>
<Td> u0627 </td>
<Td> 10/9/2008 </td>
<Td> 3 Bdrm Condo K/Q (6 left) </td>
<Td> 3 </td>
<Td> 8 persons </td>
<Td> $339.00 </td>
<Td> $1356.00 </td>
</Tr>
<Tr>
<Td> u0642 </td>
<Td> 9/23/2008 </td>
<Td> 2 Bdrm Cabin Firepl K/Q + T (1 left) </td>
<Td> 3 </td>
<Td> 7 persons </td>
<Td> $339.00 </td>
<Td> $1356.00 </td>
</Tr>
<Tr>
<Td> u0615 </td>
<Td> 9/3/2008 </td>
<Td> 3 Bdrm Condo K/Q/2 T (2 left) </td>
<Td> 4 </td>
<Td> 8 persons </td>
<Td> $379.00 </td>
<Td> $1516.00 </td>
</Tr>
<Tr>
<Td> u0607 </td>
<Td> 9/9/2008 </td>
<Td> 2 Bdrm. Loft K/Q, 3 TB/SS (9 left) </td>
<Td> 6 </td>
<Td> 11 persons </td>
<Td> $389.00 </td>
<Td> $1556.00 </td>
</Tr>
<Tr>
<Td> u0609 </td>
<Td> 9/27/2008 </td>
<Td> Dlx 1 Bdrm Cabin Firepl K (3 left) </td>
<Td> 1 </td>
<Td> 4 persons </td>
<Td> $389.00 </td>
<Td> $1556.00 </td>
</Tr>
<Tr>
<Td> u0635 </td>
<Td> 9/17/2008 </td>
<Td> Exec 2 Bdrm Lft K/2Q/SS (1 left) </td>
<Td> 4 </td>
<Td> 10 </td>
<Td> $399.00 </td>
<Td> $1596.00 </td>
</Tr>
<Tr>
<Td> u0621 </td>
<Td> 9/6/2008 </td>
<Td> 3 Bdrm Townhome (3 left) </td>
<Td> 3 </td>
<Td> 6 </td>
<Td> $409.00 </td>
<Td> $1636.00 </td>
</Tr>
<Tr>
<Td> u0601 </td>
<Td> 9/24/2008 </td>
<Td> 3 Bdrm Cabin K/Q + T/2 T (1 left) </td>
<Td> 5 </td>
<Td> 9 persons </td>
<Td> $469.00 </td>
<Td> $1876.00 </td>
</Tr>
<Tr>
<Td> u0605 </td>
<Td> 9/25/2008 </td>
<Td> Dlx 1Bd Loft, K, Q/T firepl (1 left) </td>
<Td> 3 </td>
<Td> 6 </td>
<Td> $469.00 </td>
<Td> $1876.00 </td>
</Tr>
<Tr>
<Td> u0611 </td>
<Td> 9/28/2008 </td>
<Td> Dlx 2 Bdm Cbn Firepl K/2 T (3 left) </td>
<Td> 2 </td>
<Td> 6 </td>
<Td> $469.00 </td>
<Td> $1876.00 </td>
</Tr>
<Tr>
<Td> u0604 </td>
<Td> 10/6/2008 </td>
<Td> Deluxe 3 Bdrm Condo K/Q (2 left) </td>
<Td> 3 </td>
<Td> 8 persons </td>
<Td> $499.00 </td>
<Td> $1996.00 </td>
</Tr>
<Tr>
<Td> u0617 </td>
<Td> 9/30/2008 </td>
<Td> Dlx3Bdm/2Bth/FP/K/QT (1 left) </td>
<Td> 5 </td>
<Td> 8 persons </td>
<Td> $549.00 </td>
<Td> $2196.00 </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>