Use JavaScript to sort simple table clicks

Last Update:2018-12-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

From: http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html

A new bug was found: 10 is smaller than 2 because sort is sorted by ascii by default. This problem has been fixed.
Download the latest demo [fixed some known problems, and optimized some with replies from netizens Code , Usage is similar to the original]
HTML code [You can ignore it. It has nothing to do with HTML.]:
<! 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"> <pead> <title> k2046.tablesorter </title> <style type = "text/CSS"> body {font-size: 12px; line-Height: 25px ;} tr {Height: 25px ;} Th {font-size: 14px; border-bottom: solid 1px # dddddd; Background-color: # eeeeee ;} TD {font-size: 12px; text-align: center ;} . sortdesccss {background-image: URL (http://k2046.cn/tb/Desc.gif); background-repeat: No-Repeat; Background-position: Right Center;} . sortasccss {background-image: URL (http://k2046.cn/tb/Asc.gif); background-repeat: No-Repeat; Background-position: Right Center ;} </style> <script language = "JavaScript" type = "text/JavaScript" src = "http://files.cnblogs.com /Robot/tablesorter. JS "> </SCRIPT> </pead> <body> code: New tablesorter (" tb1 "); effect: Click any header to perform sorting. <Table border = "0" style = "border: solid 1px # dddddddd; width: 360px; "cellpadding =" 0 "cellspacing =" 0 "id =" tb1 "> <tr> <TH> NO. </Th> <TH> name </Th> <TH> employee ID </Th> <TH> position </Th> <TH> gender </Th> <TH> Performance </Th> <TH> report time </Th> </tr> <tr> <TD> 1 </TD> <TD> Andy Lau </TD> <TD> 8008 </TD> <TD> President </TD> <TD> male </TD> <TD> 98 </TD> <TD> 2008-04-12 </TD> </tr> <tr> <TD> 2 </TD> <TD> Wu qilong </TD> <TD> 8004 </TD> <TD> supervisor </TD> <TD> male </TD> <TD> 80 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 3 </TD> <TD> Wang Guangliang </TD> <TD> 8003 </TD> <TD> Manager </TD> <TD> male </TD> <TD> 85 </TD> <TD> 2008 -04-15 </TD> </tr> <TD> 4 </TD> <TD> Zhang Xueyou </TD> <TD> 8009 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 90 </TD> <TD> 2008-04-11 </TD> </tr> <tr> <TD> 5 </TD> <TD> Cecilia Cheung </TD> <TD> 8005 </TD> <TD> assistant </TD> <TD> female </TD> <TD> 78 </TD> <TD> 2008-04-13 </TD> </tr> <TD> 6 </TD> <TD> * ** </TD> <TD> 8001 </TD> <TD> Director </TD> <TD> male </TD> <TD> 60 </TD> <TD> 2008-04-18 </TD> </tr> <TD> 7 </TD> <TD> Chen Huilin </TD> <TD> 8002 </TD> <TD> trial period </TD> <TD> female </TD> <TD> 85 </TD> <TD> 2008-04-18 </TD> </tr> <TD> 8 </TD> <TD> Zhang mamayu </TD> <TD> 8007 </TD> <TD> Senior Manager </TD> <TD> female </TD> <TD> 82 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 9 </TD> <TD> Zhou runfa </TD> <TD> 8006 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 88 </TD> <TD> 2008-04-13 </TD> </tr> </table> code: new tablesorter ("tb2", 0, 2, 5, 6); effect: Click columns 0, 2, 5, and 6 in the header to perform sorting. <Table border = "0" style = "border: solid 1px # dddddddd; width: 360px; "cellpadding =" 0 "cellspacing =" 0 "id =" tb2 "> <tr> <TH> NO. </Th> <TH> name </Th> <TH> employee ID </T H> <TH> position </Th> <TH> gender </Th> <TH> Performance </Th> <TH> report time </Th> </tr> <TD> 1 </TD> <TD> Andy Lau </TD> <TD> 8008 </TD> <TD> President </TD> <TD> male </TD> <TD> 98 </TD> <TD> 2008-04-12 </TD> </tr> <tr> <TD> 2 </TD> <TD> Wu qilong </TD> <TD> 8004 </TD> <TD> supervisor </TD> <TD> male </TD> <TD> 80 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 3 </TD> <TD> Wang Guangliang </TD> <TD> 8003 </TD> <TD> Manager </ TD> <TD> male </TD> <TD> 85 </TD> <TD> 2008-04-15 </TD> </tr> <TD> 4 </TD> <TD> Zhang Xueyou </TD> <TD> 8009 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 90 </TD> <TD> 2008-04-11 </TD> </tr> <TD> 5 </TD> <TD> Cecilia Cheung </TD> <TD> 8005 </TD> <TD> assistant </TD> <TD> female </TD> <TD> 78 </TD> <TD> 2008-04-13 </TD> </tr> <TD> 6 </TD> <TD> *** </TD> <TD> 8001 </TD> <TD> Director </TD> <TD> male </TD> <TD> 60 </TD> <TD> 2008-04-18 </TD> </tr> <tr> <TD> 7 </TD> <TD> Chen Huilin </TD> <TD> 8002 </TD> <TD> trial period </TD> <TD> female </TD> <TD> 85 </TD> <TD> 2008-04-18 </TD> </tr> <TD> 8 </TD> <TD> Zhang manyu </TD> <TD> 8007 </TD> <TD> Senior Manager </TD> <TD> female </TD> <TD> 82 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 9 </TD> <TD> Zhou runfa </ TD> <TD> 8006 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 88 </TD> <TD> 2008-04-13 </TD> </tr> </table> code: new tablesorter ("Fig "). onsorted = function (C, T) { alert ("table is sorted by" + C. innerhtml + "" + (T? "ASC": "DESC"); } effect: Click any header to perform sorting and return a prompt. <Table border = "0" style = "border: solid 1px # dddddddd; width: 360px; "cellpadding =" 0 "cellspacing =" 0 "id =" int32 "> <tr> <TH> NO. </Th> <TH> name </Th> <TH> employee ID </Th> <TH> position </Th> <TH> gender </Th> <TH> Performance </Th> <TH> report time </Th> </tr> <tr> <TD> 1 </TD> <TD> Andy Lau </TD> <TD> 8008 </TD> <TD> President </TD> <TD> male </TD> <TD> 98 </TD> <TD> 2008-04-12 </TD> </tr> <TD> 2 </TD> <TD> Wu qilong </TD> <TD> 8004 </TD> <TD> supervisor </TD> <TD> male </TD> <TD> 80 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 3 </TD> <TD> Wang Guangliang </TD> <TD> 8003 </TD> <TD> Manager </TD> <TD> male </TD> <TD> 85 </TD> <TD> 2008-04-15 </TD> </tr> <TD> 4 </TD> <TD> Zhang Xueyou </TD> <TD> 8009 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 90 </TD> <TD> 2008-04-11 </TD> </tr> <tr> <TD> 5 </TD> <TD> Cecilia Cheung </TD> <TD> 8005 </TD> <TD> assistant </TD> <TD> female </TD> <TD> 78 </TD> <TD> 2008-04-13 </TD> </tr> <TD> 6 </TD> <TD> *** </TD> <TD> 8001 </TD> <TD> Director </TD> <TD> male </TD> <TD> 60 </TD> <TD> 2008-04-18 </TD> </tr> <TD> 7 </TD> <TD> Chen Huilin </TD> <TD> 8002 </TD> <TD> trial period </TD> <TD> female </TD> <TD> 85 </TD> <TD> 2008-04-18 </TD> </tr> <tr> <TD> 8 </TD> <TD> Zhang manyu </TD> <TD> 8007 </TD> <TD> Senior Manager </TD> <TD> female </TD> <TD> 82 </TD> <TD> 2008-04-16 </TD> </tr> <TD> 9 </TD> <TD> Zhou runfa </ TD> <TD> 8006 </TD> <TD> Vice President </TD> <TD> male </TD> <TD> 88 </TD> <TD> 2008-04-13 </TD> </tr> </table> <script language = "JavaScript" type = "text/JavaScript"> New tablesorter ("tb1 "); New tablesorter ("tb2", 0, 2, 5, 6); New tablesorter ("interfaces "). onsorted = function (C, T) { alert ("table is sorted by" + C. innerhtml + "" + (T? "ASC": "DESC ")); } </SCRIPT> </body> </ptml> 
JavaScript code:
// Author: Wolf robot // contact: robot@k2046.cn // Date: 2008-04-19 // explain: enables the table to be sorted by clicking. /* usage: Method 1: New tablesorter ("tb1"); effect: Any cell in the first row of the table whose ID is tb1 can be clicked for sorting. Method 2: New tablesorter ("tb1", 0, 1, 3); effect: cells 0, 1, and 3 of the first row of the table whose ID is tb1 can be clicked and sorted. */ function tablesorter (table) { This. table = This. $ (table); If (this. table. Rows. length <= 1) { return; } This. init (arguments); } // The following style is applicable to the cells in the header. tablesorter. prototype. normalcss = "normalcss"; // The style when the sorting is not executed. tablesorter. prototype. sortasccss = "sortasccss"; // The Style in ascending order. tablesorter. prototype. sortdesccss = "sortdesccss"; // The Style in descending order. // initialize table information and operations. tablesorter. prototype. init = function (ARGs) { This. viewstate = []; for (VAR x = 0; x <this. table. rows [0]. cells. length; X ++) { This. viewstate [x] = false; } If (ARGs. length> 1) { for (VAR x = 1; x <args. length; X ++) { If (ARGs [x]> This. table. rows [0]. cells. length) { continue; } else { This. table. rows [0]. cells [ARGs [x]. onclick = This. getfunction (this, "sort", argS [x]); This. table. rows [0]. Cells [ARGs [x]. style. cursor = "Pointer "; } else { for (VAR x = 0; x <this. table. rows [0]. cells. length; X ++) { This. table. rows [0]. cells [X]. onclick = This. getfunction (this, "sort", x); This. table. rows [0]. cells [X]. style. cursor = "Pointer"; } // abbreviated as document. getelementbyid method. tablesorter. prototype. $ = function (element) { Return document. getelementbyid (element); } // gets the shell function of the specified object. tablesorter. prototype. getfunction = function (variable, method, Param) { return function () { variable [Method] (PARAM ); } // perform sorting. tablesorter. prototype. sort = function (COL) { var sortasnumber = true; for (VAR x = 0; x <this. table. rows [0]. cells. length; X ++) { This. Table. rows [0]. cells [X]. classname = This. normalcss; } var sorter = []; for (VAR x = 1; x <this. table. rows. length; X ++) { sorter [x-1] = [this. table. rows [X]. cells [col]. innerhtml, X]; sortasnumber = sortasnumber & this. isnumeric (sorter [x-1] [0]); } If (sortasnumber) { for (VAR x = 0; x <sorter. length; X ++) { for (var y = x + 1; y <sorter. lengt H; y ++) { If (parsefloat (sorter [y] [0]) <parsefloat (sorter [x] [0]) { var TMP = sorter [X]; sorter [x] = sorter [y]; sorter [y] = TMP; } else { sorter. sort (); } If (this. viewstate [col]) { sorter. reverse (); This. viewstate [col] = false; This. table. rows [0]. cells [col]. classname = This. sortdesccss; } Else { This. viewstate [col] = true; This. table. rows [0]. cells [col]. classname = This. sortasccss; } var Rank = []; for (VAR x = 0; x <sorter. length; X ++) { rank [x] = This. getrowhtml (this. table. rows [sorter [x] [1]); } for (VAR x = 1; x <this. table. rows. length; X ++) { for (var y = 0; y <this. table. rows [X]. cells. length; y ++) { This. tab Le. rows [X]. cells [Y]. innerhtml = rank [x-1] [Y]; } This. onsorted (this. table. rows [0]. cells [col], this. viewstate [col]); } // get the content of the specified row. tablesorter. prototype. getrowhtml = function (ROW) { var result = []; for (VAR x = 0; x <row. cells. length; X ++) { result [x] = row. cells [X]. innerhtml; } return result; } tablesorter. prototype. isnum Eric = function (Num) { return/^ \ D + (\. \ D + )? $ /. Test (Num); } // you can perform sorting by yourself. tablesorter. prototype. onsorted = function (cell, isasc) { return; }

Code: New tablesorter ("tb1 ");
Effect: Click any header to perform sorting.

Serial number	Name	Employee ID	Position	Gender	Performance	Report Time
1	Andy Lau	8008	President	Male	98	2008-04-12
2	Wu qilong	8004	Supervisor	Male	80	2008-04-16
3	Wang Guangliang	8003	Manager	Male	85	2008-04-15
4	Zhang Xueyou	8009	Vice President	Male	90	2008-04-11
5	Cecilia Cheung	8005	Assistant	Female	78	2008-04-13
6	***	8001	Director	Male	60	2008-04-18
7	Chen Huilin	8002	Trial Period	Female	85	2008-04-18
8	Zhang manyu	8007	Senior Manager	Female	82	2008-04-16
9	Zhou runfa	8006	Vice President	Male	88	2008-04-13

Code: New tablesorter ("tb2", 0, 2, 5, 6 );
Effect: Click the, columns in the header to perform sorting.

Serial number	Name	Employee ID	Position	Gender	Performance	Report Time
1	Andy Lau	8008	President	Male	98	2008-04-12
2	Wu qilong	8004	Supervisor	Male	80	2008-04-16
3	Wang Guangliang	8003	Manager	Male	85	2008-04-15
4	Zhang Xueyou	8009	Vice President	Male	90	2008-04-11
5	Cecilia Cheung	8005	Assistant	Female	78	2008-04-13
6	***	8001	Director	Male	60	2008-04-18
7	Chen Huilin	8002	Trial Period	Female	85	2008-04-18
8	Zhang manyu	8007	Senior Manager	Female	82	2008-04-16
9	Zhou runfa	8006	Vice President	Male	88	2008-04-13

Code: New tablesorter ("int32"). onsorted = function (C, T)
{
Alert ("table is sorted by" + C. innerhtml + "" + (T? "ASC": "DESC "));
}
Effect: Click any header to perform sorting and return a prompt.

Serial number	Name	Employee ID	Position	Gender	Performance	Report Time
1	Andy Lau	8008	President	Male	98	2008-04-12
2	Wu qilong	8004	Supervisor	Male	80	2008-04-16
3	Wang Guangliang	8003	Manager	Male	85	2008-04-15
4	Zhang Xueyou	8009	Vice President	Male	90	2008-04-11
5	Cecilia Cheung	8005	Assistant	Female	78	2008-04-13
6	***	8001	Director	Male	60	2008-04-18
7	Chen Huilin	8002	Trial Period	Female	85	2008-04-18
8	Zhang manyu	8007	Senior Manager	Female	82	2008-04-16
9	Zhou runfa	8006	Vice President	Male	88	2008-04-13

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More