Table with sorting and autofilter
This script creates a table with extremely fast sorting and autofilter feature.
Other sorting scripts used to has a limit around 1000 rows without collapsing the browser.
This one is able to handle around 5000 rows without having significant problem.
The script works much faster than several other sorting solution.
Features:
- sorting
- autofilter with math relations
- show selected and non-selected elements
- support of different date and numeric form
Example
AAA | bbb | cccc | dddd | eeee | ID ? |
---|---|---|---|---|---|
Honeywell Intl Inc | 19.88 | 0.26 | 0.34 | 1955-12-3 | 0 |
JP Morgan & Chase & Co | 83.81 | 0.02 | 1.28 | 1993-2-27 | 1 |
Walt Disney Company (The) (Holding Company) | 29.01 | -0.43 | 0.09 | 1934-2-12 | 2 |
AT&T Inc. | 34.64 | 0.51 | 0.15 | 1934-2-12 | 3 |
General Motors Corporation | 83.81 | -0.43 | 1.45 | 1928-11-23 | 4 |
The Coca-Cola Company | 67.27 | 0.41 | 1.58 | 1928-11-23 | 5 |
Altria Group Inc | 29.89 | -0.48 | 0.88 | 1985-3-25 | 6 |
JP Morgan & Chase & Co | 38.77 | 0.31 | 1.11 | 1936-5-22 | 7 |
Verizon Communications | 35.57 | 0.55 | 1.39 | 1933-4-23 | 8 |
United Technologies Corporation | 30.27 | 0.51 | -1.54 | 1963-2-13 | 9 |
Citigroup, Inc. | 45.73 | 0.31 | 2.40 | 2003-5-22 | 10 |
The Home Depot, Inc. | 30.27 | 0.07 | 1.58 | 1923-3-29 | 11 |
Citigroup, Inc. | 64.72 | 0.39 | 0.13 | 1955-12-3 | 12 |
Walt Disney Company (The) (Holding Company) | 52.55 | 0.73 | 0.02 | 1963-2-13 | 13 |
The Coca-Cola Company | 29.01 | 0.73 | 2.40 | 1945-5-23 | 14 |
Hewlett-Packard Co. | 19.88 | 0.14 | 0.58 | 1923-9-23 | 15 |
The Coca-Cola Company | 83.81 | 0.51 | 1.11 | 1923-9-23 | 16 |
Merck & Co., Inc. | 27.96 | 0.01 | 0.04 | 1954-4-10 | 17 |
Alcoa Inc | 64.72 | 0.01 | 0.81 | 1963-2-13 | 18 |
Citigroup, Inc. | 45.45 | -0.48 | 1.39 | 1985-3-25 | 19 |
Boeing Co. | 71.72 | 0.01 | 0.49 | 1988-12-1 | 20 |
General Motors Corporation | 45.73 | -0.48 | 0.49 | 1979-9-3 | 21 |
Verizon Communications | 35.57 | -0.03 | 1.39 | 1911-12-11 | 22 |
AT&T Inc. | 35.57 | 0.07 | 1.28 | 1923-1-7 | 23 |
The Procter & Gamble Company | 68.1 | 0.4 | 1.01 | 1943-7-23 | 24 |
The Home Depot, Inc. | 29.89 | 0.02 | 0.81 | 1978-8-23 | 25 |
Exxon Mobil Corp | 75.43 | 0.53 | 0.13 | 1979-9-3 | 26 |
United Technologies Corporation | 35.57 | 0.24 | 0.34 | 1963-2-13 | 27 |
General Electric Company | 29.89 | 0.24 | 0.02 | 1978-8-23 | 28 |
The Procter & Gamble Company | 71.72 | 0.31 | -0.08 | 1943-7-23 | 29 |
E.I. du Pont de Nemours and Company | 49.37 | 0.41 | 0.34 | 1934-2-12 | 30 |
3m Co | 63.26 | 0.24 | 0.04 | 1994-1-21 | 31 |
AT&T Inc. | 45.73 | 0.01 | 3.74 | 1999-4-28 | 32 |
Honeywell Intl Inc | 49.37 | 0.42 | 0.13 | 1979-9-3 | 33 |
Altria Group Inc | 63.26 | -0.08 | 0.34 | 1923-9-23 | 34 |
JP Morgan & Chase & Co | 35.57 | 0.4 | 1.45 | 2003-5-22 | 35 |
Altria Group Inc | 29.01 | 0.86 | 0.58 | 2001-5-16 | 36 |
JP Morgan & Chase & Co | 45.07 | 0.42 | 0.09 | 1963-2-13 | 37 |
Wal-Mart Stores, Inc. | 45.07 | 0.41 | 1.47 | 1923-1-7 | 38 |
The Home Depot, Inc. | 81.41 | 0.05 | 0.02 | 1963-2-13 | 39 |
The Procter & Gamble Company | 35.57 | 0.39 | 0.71 | 1973-1-23 | 40 |
s Corporation | 34.64 | 0.39 | -0.23 | 1997-10-2 | 41 |
Caterpillar Inc. | 38.77 | 0.86 | 1.11 | 1954-4-10 | 42 |
The Coca-Cola Company | 19.88 | 0.02 | 1.02 | 1999-4-28 | 43 |
Altria Group Inc | 45.07 | 0.39 | 1.45 | 1911-12-11 | 44 |
Altria Group Inc | 81.41 | -0.08 | 0.09 | 1979-9-3 | 45 |
General Motors Corporation | 36.53 | 0.51 | -0.64 | 1928-11-23 | 46 |
Exxon Mobil Corp | 29.89 | 0.31 | 1.39 | 2003-5-22 | 47 |
Altria Group Inc | 19.88 | 0.01 | 0.54 | 1923-7-23 | 48 |
American Express Company | 38.77 | 0.73 | 0.02 | 1943-7-23 | 49 |
Altria Group Inc | 75.43 | 0.01 | 0.81 | 1943-12-28 | 50 |
Wal-Mart Stores, Inc. | 83.81 | 0.31 | 1.28 | 1988-12-1 | 51 |
Verizon Communications | 27.96 | 0.01 | 1.39 | 1985-3-25 | 52 |
The Coca-Cola Company | 64.72 | 0.42 | 0.04 | 1911-12-11 | 53 |
General Motors Corporation | 68.1 | -0.43 | 1.39 | 1985-3-25 | 54 |
The Coca-Cola Company | 68.1 | 0.06 | 0.54 | 1944-3-23 | 55 |
United Technologies Corporation | 45.07 | 0.41 | 0.81 | 1955-11-13 | 56 |
s Corporation | 45.45 | 0.01 | -1.54 | 1954-4-10 | 57 |
Intel Corporation | 83.81 | 0.02 | 0.15 | 2003-5-22 | 58 |
Altria Group Inc | 30.27 | 0.39 | 0.49 | 1928-11-23 | 59 |
The Coca-Cola Company | 81.41 | 0.42 | 0.49 | 1936-5-22 | 60 |
American Express Company | 35.57 | -0.48 | 1.01 | 1988-12-1 | 61 |
s Corporation | 64.72 | -0.03 | -0.64 | 1997-10-2 | 62 |
Boeing Co. | 71.72 | 0.31 | 0.34 | 1923-1-7 | 63 |
The Coca-Cola Company | 64.72 | 0.02 | 0.58 | 1978-8-23 | 64 |
JP Morgan & Chase & Co | 61.91 | 0.86 | 0.54 | 1934-2-12 | 65 |
Exxon Mobil Corp | 40.48 | 0.44 | -0.23 | 1955-12-3 | 66 |
Exxon Mobil Corp | 19.88 | -0.08 | 1.58 | 1978-8-23 | 67 |
3m Co | 31.61 | 0.26 | -0.08 | 1922-3-26 | 68 |
General Electric Company | 36.76 | 0.44 | 0.88 | 1923-9-23 | 69 |
Pfizer Inc | 36.76 | 0.51 | 0.03 | 1923-7-23 | 70 |
International Business Machines | 36.76 | 0.02 | -1.54 | 1923-1-7 | 71 |
Citigroup, Inc. | 19.88 | 0.31 | 1.02 | 1923-3-29 | 72 |
Walt Disney Company (The) (Holding Company) | 31.61 | 1.09 | -0.64 | 1928-11-23 | 73 |
JP Morgan & Chase & Co | 68.1 | 0.55 | 3.74 | 1955-11-13 | 74 |
General Motors Corporation | 45.07 | -0.03 | 0.81 | 1988-12-1 | 75 |
American International Group, Inc. | 27.96 | 0.51 | 0.13 | 1955-11-13 | 76 |
Pfizer Inc | 71.72 | 1.09 | 1.47 | 1978-8-23 | 77 |
JP Morgan & Chase & Co | 40.48 | 0.4 | 0.02 | 2001-5-16 | 78 |
s Corporation | 52.55 | 0.51 | 0.34 | 1955-12-3 | 79 |
3m Co | 25.84 | 0.26 | 1.11 | 1999-4-28 | 80 |
Johnson & Johnson | 40.48 | 0.39 | 0.03 | 1943-7-23 | 81 |
Johnson & Johnson | 31.61 | 0.28 | 0.88 | 1928-11-23 | 82 |
The Procter & Gamble Company | 36.76 | 0.41 | 0.04 | 1928-11-23 | 83 |
Verizon Communications | 63.26 | 0.02 | 2.40 | 1973-1-23 | 84 |
American International Group, Inc. | 40.48 | 0.01 | 0.13 | 1923-7-23 | 85 |
International Business Machines | 38.77 | 0.01 | -0.64 | 1923-7-23 | 86 |
Caterpillar Inc. | 45.45 | 0.4 | -1.54 | 1943-12-28 | 87 |
Alcoa Inc | 27.96 | 0.31 | 0.49 | 1988-12-1 | 88 |
The Home Depot, Inc. | 29.89 | 0.02 | 1.58 | 1954-4-10 | 89 |
Walt Disney Company (The) (Holding Company) | 30.27 | 0.01 | 0.03 | 1985-3-25 | 90 |
American International Group, Inc. | 64.13 | 1.09 | 1.39 | 1988-12-1 | 91 |
The Home Depot, Inc. | 34.64 | 0.31 | 1.63 | 1923-1-7 | 92 |
International Business Machines | 75.43 | 0.01 | 0.04 | 1979-9-3 | 93 |
Altria Group Inc | 68.1 | 0.01 | 0.71 | 1944-3-23 | 94 |
The Coca-Cola Company | 71.72 | -0.03 | 0.34 | 1922-3-26 | 95 |
Microsoft Corporation | 83.81 | 0.73 | 0.02 | 1985-3-25 | 96 |
Alcoa Inc | 29.89 | 0.53 | -0.08 | 1954-4-10 | 97 |
United Technologies Corporation | 67.27 | 0.28 | 0.03 | 1923-1-7 | 98 |
Caterpillar Inc. | 64.72 | -0.08 | -0.23 | 1911-12-11 | 99 |
Installation
You can manage the sorting, filtering and the visualation properties via css classes. The script analize the table and th element of the page and filter the undermentioned classes.
Classes of TABLE element:
rowstyle-*, sortable-onload-N, select-row-* hilight-row-*, colstyle-*
rowstyle-*
: If the table is striped via css class, the script will keep the alternate style on the correct lines after sorting. * is the class name of the alternate row.sortable-onload-N
: The script will automatically sort the any table that has been given the className. N specifies an integer that defines the column to useselect-row-*
: If the table have this class, the table's rows are selctable. The * define the class of the selected rows.hilight-row-*
: You can define that rows style must change on mouseover event. The * define the class of the row when the mouse is over them.colstyle-*
: If this class is defined, each td node will have the same style. The * difne the class of the nodes to change their style.img-filter
: you can place an image into the header of the column. The search field will open when you click on the image. If you did not set the class, the field would be opened when you click on the title of the column. Image is placed on the left side of the column's title, so you must add the float:right css property to the image if you want to place it on the right side of the title.
Classes of the TH element:
sortable-numeric
sortable-numeric-comma
sortable-currency
sortable-text
sortable-date
sortable
filtered
These classes are define the data type of the columns. The sortable-numeric-comma class is for hunarian number format: 100.000,23 = 100000.24
The table must be sorted on window load becouse of some function. Sorting will automatically
add the sortable-onload-N
class to the table. The affected functionalitys are
select-row-*, hilight-row-*
.
The filter can work with numbers and non numbers data types. If the column header have the
sortble-numeric class, the column data is handled as number. Filtered coloumn is indicated with filtered
class.
SELECT function setup, usage
New function of the table is the selectable rows. The selected rows are hideable.
To enable this function you must add the sortable-onload-N
and select-row-*
classes to the table.
The rows are selectable via single click. If you want to select more than one line, hold down the Ctrl key and click on the
rows.
There is four function to manipulate the rows:
- hide-show the selected rows -
fdTableSort.toogleDispSelected
- hide-show the not selected rows-
fdTableSort.toogleDispNoSelected
- inverse selection -
fdTableSort.inverzSelect
- unselect all rows -
fdTableSort.selectNone
The functions' argument must be the id of the table:
<input type="button" onclick="fdTableSort.toogleDispSelected('mytable')" value="Show|Hide Selected" />
If you click to this button, the selected rows of the table with mytable id will be hidden. If you click
on it again, show up them.
The fdTableSort.selectNone
function unselect and show up all rows.
Usage:
Sorting the data:
To sort a column, just click double on the header of the column. To reverse the sort, click double again.
Filter:
To open the search field, click on the column title.
The search start if you press enter in the search field.
In default the search is analyze that the typed word is match the begenning of the column's value.
If the column's data type is number, you can use the "less than", "greater than", "equal" and "non
equal" operators
- >20 :greater than 20
- <20 :less than 20
- =20 :equal 20
- !20 :everything, but 20<
The title of the filtered column has a class, named "filtered". You can indicate which column is filtered.
Click out of the field, then it will be closed.
col-overflow
Use this solution to set up fixed width of cells, and cut off the text, which hang out of the cell.
HTML
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td class="ov"><div>lorem ipsum</div></td>
<td>dolor sit amet</td>
<td>consectetuer adipiscing</td>
</tr>
</table>
CSS
td {
border: 1px solid #7FC6FF;
}
td.ov {
white-space: nowrap;
overflow:hidden;
width: 150px;
}
td div {
overflow:hidden;
white-space: nowrap;
width: 150px;
margin:0;
padding:0;
}
In this example we use the solution on the first column. Add an extra div into the cell with
overflow:hidden;white-space:nowrap;
css properties.
If you only want to disable all linebrake in the cell, you don't need to add the extra div, just add
a white-space:nowrap
property to the cells (but you don't need the overflow:hidden property).
Sources inspired us to create the Table with sorting and autofilter Script
http://frequency-decoder.com
http://code.mikebrittain.com/2006/01/inarray-method-for-javascript-and-actionscript/
Download the Table with sorting and autofilter Script
download (source and documentation) | back
Distribute the Table with sorting and autofilter Script
..:: Add to del.icio.us ::.. | ..:: Digg this! ::..
Comments
impressum products free downloads contact us RSS![]() |
© 2007 - Viala Kft. - Tel: (1) 317 4170 |