Home > Web Front-end > JS Tutorial > body text

javascript table sorting and header floating effect (extended SortTable)_javascript skills

WBOY
Release: 2016-05-16 18:54:32
Original
1334 people have browsed it

1. SortTable instructions
SortTable
version 2
7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/

Instructions:
Download this file
Add
to your HTML
Add class="sortable" to any table you'd like to make sortable
Click on the headers to sort

Thanks to many, many 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, such as



2. Update instructions

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

Instructions:
1. Add Chinese sorting
2. Add the function of specifying different css styles for each row (such as inconsistent background colors of odd and even rows)
By default, the sorting function will be added to all columns. For columns that do not need to be sorted, you can add CSS: "sorttable_nosort", such as
Usage: Add attributes to the table where the header is to be floated, such as

3. Add header floating function (support multiple tables on the same page, such as tables under different Tab labels)
Usage: Add CSS to the table where you want the header to float, such as

In addition, it is best to specify the column width of each column of the "header" and "data row", such as NameAge
Zhang San21

To avoid misalignment between the columns of the table header and the columns of the data when the table header floats under FireFox
4. Add automatic sorting after page loading
Usage: Add the attribute autosortcol on the table, corresponding to the column number to be automatically sorted. Note that it starts from 0
For example,
means that when the page is loaded successfully, it will The newly added code that automatically adds

to line 4 is commented in Chinese, blocking part of the original code. In addition, the ascending and descending order ms in the original code was reversed, so I made changes here. Demo addresshttp://img.jb51.net/online/sorttable/sorttable.htm
Package download address: http://img.jb51.net/online/ sorttable/sorttable.rar
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template