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