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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.