Very powerful table sorted by header, click the header name and sort the contents of the table

JS Code:

1     /**2 * Sort table columns by table header3      *4 * @param stableid5 * table to be processed id<table id= ' >6 * @param icol7 * Field Column ID eg:0 1 2 3 ...8 * @param sdatatype9 * The field data type Int,float,date by default when string processingTen      */ One     functionorderbyname (Stableid, Icol, Sdatatype) { A          varotable =document.getElementById (Stableid); -          varOtbody = Otable.tbodies[0]; -          varColdatarows =otbody.rows; the          varATRs =NewArray; -           for(vari = 0; i < coldatarows.length; i++) { -Atrs[i] =Coldatarows[i]; -         } +          if(Otable.sortcol = =icol) { - atrs.reverse (); +}Else  { A Atrs.sort (Generatecomparetrs (Icol, Sdatatype)); at         } -          varOfragment =document.createdocumentfragment (); -           for(varj = 0; J < Atrs.length; J + +) { - Ofragment.appendchild (Atrs[j]); -         } - Otbody.appendchild (ofragment); inOtable.sortcol =Icol; -     } to      +      -     /** the * Processing of sorted field types *      * $ * @param svaluePanax Notoginseng * The field value defaults to the character type that compares the ASCII code - * @param sdatatype the * field type is only supported for date format mm/dd/yyyy or mmmm dd,yyyy (January 12,2004) + * @return A      */ the     functionconvert (svalue, sdatatype) { +          Switch(sdatatype) { -           Case"Int" : $              returnparseint (svalue); $           Case"Float" : -              returnparsefloat (svalue); -           Case"Date" : the              return   NewDate (Date.parse (svalue)); -          default :Wuyi              returnsvalue.tostring (); the         } -     } Wu      -      About     /** $ * Comparison function Generator -      * - * @param icol - * Number of data rows A * @param sdatatype + * The data type of the row the * @return -      */ $     functiongeneratecomparetrs (Icol, sdatatype) { the          return   functioncomparetrs (oTR1, oTR2) { theVValue1 =convert (Otr1.cells[icol].firstchild.nodevalue, sdatatype); theVValue2 =convert (Otr2.cells[icol].firstchild.nodevalue, sdatatype); the              if(VValue1 <vValue2) { -                  return-1; in}Else   if(VValue1 >vValue2) { the                  return1; the}Else  { About                  return0; the             } the         }; the}

In the table table, you need to sort the column headers to add events, call orderbyname (Stableid, Icol, Sdatatype) .

Three parameters The first is the ID of the table, the second parameter is the first column, the third argument is the type, and the character type is not written.

Note If the column header does not participate in the sort, it can be placed in another table.

JSP section Sample code:

<Tablewidth= "100%"Border= "0"cellpadding= "0"cellspacing= "0"class= "Import_tab"Align= "Center">                            <tbody>                                <TR>                                <TDwidth= "11%"class= "Borderth"title= "The query name is empty and there is no query result">Name (query)</TD>                                <TDwidth= "6%"class= "Borderth"title= "The operating state is empty means that it has no query results">Business status</TD>                                <TDwidth= "11%"class= "Borderth"title= "click to sort; Ctrl+f Find "onclick= "Orderbyname (' Resulttab ', 2);">Name (the company name is filled in)</TD>                                <TDwidth= "10%"class= "Borderth" >Unified Social Credit Code</TD>                                <TDwidth= "7%"class= "Borderth"title= "Click to sort"onclick= "Orderbyname (' Resulttab ', 4,date);">Application Date</TD>                                </TR>                            </tbody>                            </Table>                                <TableID= "Resulttab"width= "100%"Border= "0"cellpadding= "0"cellspacing= "0"class= "Import_tab"Align= "Center">                                    <tbody>                            <C:foreachItems= "${listitems}"var= "WGL"Varstatus= "num">                                <TR>                                 <TDwidth= "11%"class= "Borderth" >${wgl.entname}</TD>                                <TDwidth= "6%"class= "Borderth">${wgl.entstatus}</TD>                                <TDwidth= "11%"class= "Borderth">${wgl.username}</TD>                                <TDwidth= "10%"class= "Borderth">${wgl.appcertificatenum}</TD>                                <TDwidth= "7%"class= "Borderth"><fmt:formatdatevalue= "${wgl.appdate}"type= "Date"Datestyle= "Long" /></TD>                                </TR>                            </C:foreach>                            </tbody>                        </Table> 

such as the effect of the date sorting, and then click to convert the order of sorting show

Very powerful table sorted by header, click the header name and sort the contents of the table