Self-made JS table sorting

Source: Internet
Author: User

 

Table sorting

It has fewer functions than tablesorter but is flexible and can be adjusted based on actual needs.

I used tablesorter to do the requirement, but it was too hard to do it myself.

Add in

 

In table format, <TD style = "display: none"> 1 </TD> is used to restore the original order.

<Table id = "Table1" width = "100%"> <thead> <tr> <TH style = "display: none "> </Th> <TH id =" t1h1 "> table 1-Sort 1 </Th> <TH id =" t1h2 "> table 1-Sort 2 </Th> <TH id = "t1h3"> table 1-Sort 3 </Th> </tr> </thead> <tbody> <tr> <TD style = "display: none "> 1 </TD> <TD> 200 </TD> <TD> 300 </TD> <TD> 500 </TD> </tr> <TD style = "display: none "> 2 </TD> <TD> 100 </TD> <TD> 400 </TD> <TD> 200 </TD> </tr> <TD style = "display: none "> 3 </TD> <TD> 100 </TD> <TD> 600 </TD> <TD> 800 </TD> </tr> <TD style = "display: none "> 4 </TD> <TD> 300 </TD> <TD> 500 </TD> <TD> 100 </TD> </tr> </tbody> </table>

 

The merged header can also be

 

<Thead> <tr> <TH style = "display: none"> </Th> <TH colspan = "2"> <Table Style = "width: 100% "> <tr> <TD id =" TD1 "colspan =" 2 "> header </TD> </tr> <TD id =" t2h1 "> table 2-Sort 1 </TD> <TD id = "t2h2"> Table 2-Sort 2 </TD> </tr> </table> </Th> <TH ID = "t2h3"> Table 2-Sort 3 </Th> </tr> </thead>

 

Add JS

VaR openorder; // All functions var tablearr = ["Table1"]; // The registered table idvar thidarr = [["t1h1", "t1h2 ", "t1h3"]; // The idvar tdarr = [1, 2, 3] column in the stimulated sorting by the Registry. // specifies the sequence number of the columns to be triggered (column 1 is not started from 0) var thclass0 = "Header"; // The style name of the normal column var thclass1 = "headersortup "; // The style name var thclass2 = "Header" of the first sort column; // If the style name of the two sort columns is the same as the thclass0 name, The headersortdown is canceled twice) vaR orderfs1 = 1; // The first sorting method has 0 original order, 1 reverse order, and 2 positive order var orderfs2 = 0; // If the sorting is canceled twice, the normal column mode is 0, 1 is inverted, and 2 is Var h_ I _d = ["hidden"]. // record the sorting status when the input-hidden ID refreshes the page (hidden with the corresponding ID should be written on the page) if no value is assigned, disable the record function/* optional function // A-sorted table ID, and B-clicked column ID, column C udfs in Column C use these three parameters as a reference // the UDF x_x_x (A, B, C) {....} // function y_y_y (a, B, c ){.....} // 2. udfs z_z_z (a, B, c ){......} // sort by string processing function S-is the sorting column TD after innertext processing returns s followed by the returned s sort function g_g_g (s) {return s ;}*/

 

For the first time, the corresponding column numbers in tdarr are sorted by orderfs1 when the vertex element class is changed to thclass1.

The second click is triggered by the point element class change thclass2. The corresponding column numbers in tdarr are sorted by orderfs2.

Click Back and forth. In this case, the <TD style = "display: none"> 1 </TD> hidden column is not added.

If no value is added, tdarr calculates the corresponding column from 0.

If thclass0 and thclass2 are the same, the first column must be <TD style = "display: none"> 1 </TD> hidden.

The second click is changed by the vertex element class to thclass0 (thclass2). The Hidden Column 0 is sorted by orderfs2.

You can restore it.

 

There are two examples

Download link: homemade JS table sorting

 

 

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: info-contact@alibabacloud.com 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.