Javascript table sorting and table header floating effect (Extended sorttable)

Source: Internet
Author: User

1. sorttable description
Sorttable
Version 2
7th 10000l 2007
Stuart LANGRIDGE, http://www.kryogenix.org/code/browser/sorttable/

Instructions:
Download this file
Add <SCRIPT src = "sorttable. js"> </SCRIPT> to your HTML
Add class = "sortable" to any table you 'd like to make sortable
Click on the headers to sort

Thanks to publish, publish people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: Do what you want with it.

Usage: Add CSS to the table to be sorted, as shown in <Table class = "sortable">
By default, the sorting function is added to all columns. For columns that do not need to be sorted, you can add CSS: "sorttable_nosort", as shown in <TD class = "sorttable_nosort"> </TD>

Ii. Update description

Update:
Version 2.1:
9th Mar 2009
Hopesoft, http://www.51ajax.com/blog/

Note:
1. Add Chinese sorting
2. added the CSS style function for each row (for example, the background color of the odd and even rows is inconsistent)
Usage: Add attributes to the table to be float, such as <Table class = "sortable" rowclass = "Bg1, bg2, bg3">
3. added the table header floating function (support multiple tables on the same page, such as tables under different tab labels)
Usage: Add CSS to the table to float the header, as shown in <Table class = "scrolltable">
In addition, it is best to specify the column width of each column of "Header" and "Data row", as shown in
<Tr> <TD class = 'w1'> name </TD> <TD class = 'w2 '> age </TD> </tr>
<Tr> <TD class = 'w1'> James </TD> <TD class = 'w2 '> 21 </TD> </tr>
To avoid non-alignment between columns in the header and data columns when the header is floating in Firefox
4. Add Automatic Sorting after page loading
Usage: add the autosortcol attribute to the table, which corresponds to the column number to be automatically sorted. Note that it starts from 0.
For example, <Table class = "sortable" autosortcol = "3"> indicates that when the page is loaded successfully, the 4th rows are automatically loaded.

AddedCodeComments are made in Chinese, blocking some of the Code in the original code. In addition, the ascending/descending order ms in the original code is reversed. I have made changes here.
Demo address http://img.jb51.net/online/sorttable/sorttable.htm
Packaging: http://img.jb51.net/online/sorttable/sorttable.rar

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.