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

AAAbbbccccddddeeeeID ?
Honeywell Intl Inc
19.880.260.341955-12-30
JP Morgan & Chase & Co
83.810.021.281993-2-271
Walt Disney Company (The) (Holding Company)
29.01-0.430.091934-2-122
AT&T Inc.
34.640.510.151934-2-123
General Motors Corporation
83.81-0.431.451928-11-234
The Coca-Cola Company
67.270.411.581928-11-235
Altria Group Inc
29.89-0.480.881985-3-256
JP Morgan & Chase & Co
38.770.311.111936-5-227
Verizon Communications
35.570.551.391933-4-238
United Technologies Corporation
30.270.51-1.541963-2-139
Citigroup, Inc.
45.730.312.402003-5-2210
The Home Depot, Inc.
30.270.071.581923-3-2911
Citigroup, Inc.
64.720.390.131955-12-312
Walt Disney Company (The) (Holding Company)
52.550.730.021963-2-1313
The Coca-Cola Company
29.010.732.401945-5-2314
Hewlett-Packard Co.
19.880.140.581923-9-2315
The Coca-Cola Company
83.810.511.111923-9-2316
Merck & Co., Inc.
27.960.010.041954-4-1017
Alcoa Inc
64.720.010.811963-2-1318
Citigroup, Inc.
45.45-0.481.391985-3-2519
Boeing Co.
71.720.010.491988-12-120
General Motors Corporation
45.73-0.480.491979-9-321
Verizon Communications
35.57-0.031.391911-12-1122
AT&T Inc.
35.570.071.281923-1-723
The Procter & Gamble Company
68.10.41.011943-7-2324
The Home Depot, Inc.
29.890.020.811978-8-2325
Exxon Mobil Corp
75.430.530.131979-9-326
United Technologies Corporation
35.570.240.341963-2-1327
General Electric Company
29.890.240.021978-8-2328
The Procter & Gamble Company
71.720.31-0.081943-7-2329
E.I. du Pont de Nemours and Company
49.370.410.341934-2-1230
3m Co
63.260.240.041994-1-2131
AT&T Inc.
45.730.013.741999-4-2832
Honeywell Intl Inc
49.370.420.131979-9-333
Altria Group Inc
63.26-0.080.341923-9-2334
JP Morgan & Chase & Co
35.570.41.452003-5-2235
Altria Group Inc
29.010.860.582001-5-1636
JP Morgan & Chase & Co
45.070.420.091963-2-1337
Wal-Mart Stores, Inc.
45.070.411.471923-1-738
The Home Depot, Inc.
81.410.050.021963-2-1339
The Procter & Gamble Company
35.570.390.711973-1-2340
s Corporation
34.640.39-0.231997-10-241
Caterpillar Inc.
38.770.861.111954-4-1042
The Coca-Cola Company
19.880.021.021999-4-2843
Altria Group Inc
45.070.391.451911-12-1144
Altria Group Inc
81.41-0.080.091979-9-345
General Motors Corporation
36.530.51-0.641928-11-2346
Exxon Mobil Corp
29.890.311.392003-5-2247
Altria Group Inc
19.880.010.541923-7-2348
American Express Company
38.770.730.021943-7-2349
Altria Group Inc
75.430.010.811943-12-2850
Wal-Mart Stores, Inc.
83.810.311.281988-12-151
Verizon Communications
27.960.011.391985-3-2552
The Coca-Cola Company
64.720.420.041911-12-1153
General Motors Corporation
68.1-0.431.391985-3-2554
The Coca-Cola Company
68.10.060.541944-3-2355
United Technologies Corporation
45.070.410.811955-11-1356
s Corporation
45.450.01-1.541954-4-1057
Intel Corporation
83.810.020.152003-5-2258
Altria Group Inc
30.270.390.491928-11-2359
The Coca-Cola Company
81.410.420.491936-5-2260
American Express Company
35.57-0.481.011988-12-161
s Corporation
64.72-0.03-0.641997-10-262
Boeing Co.
71.720.310.341923-1-763
The Coca-Cola Company
64.720.020.581978-8-2364
JP Morgan & Chase & Co
61.910.860.541934-2-1265
Exxon Mobil Corp
40.480.44-0.231955-12-366
Exxon Mobil Corp
19.88-0.081.581978-8-2367
3m Co
31.610.26-0.081922-3-2668
General Electric Company
36.760.440.881923-9-2369
Pfizer Inc
36.760.510.031923-7-2370
International Business Machines
36.760.02-1.541923-1-771
Citigroup, Inc.
19.880.311.021923-3-2972
Walt Disney Company (The) (Holding Company)
31.611.09-0.641928-11-2373
JP Morgan & Chase & Co
68.10.553.741955-11-1374
General Motors Corporation
45.07-0.030.811988-12-175
American International Group, Inc.
27.960.510.131955-11-1376
Pfizer Inc
71.721.091.471978-8-2377
JP Morgan & Chase & Co
40.480.40.022001-5-1678
s Corporation
52.550.510.341955-12-379
3m Co
25.840.261.111999-4-2880
Johnson & Johnson
40.480.390.031943-7-2381
Johnson & Johnson
31.610.280.881928-11-2382
The Procter & Gamble Company
36.760.410.041928-11-2383
Verizon Communications
63.260.022.401973-1-2384
American International Group, Inc.
40.480.010.131923-7-2385
International Business Machines
38.770.01-0.641923-7-2386
Caterpillar Inc.
45.450.4-1.541943-12-2887
Alcoa Inc
27.960.310.491988-12-188
The Home Depot, Inc.
29.890.021.581954-4-1089
Walt Disney Company (The) (Holding Company)
30.270.010.031985-3-2590
American International Group, Inc.
64.131.091.391988-12-191
The Home Depot, Inc.
34.640.311.631923-1-792
International Business Machines
75.430.010.041979-9-393
Altria Group Inc
68.10.010.711944-3-2394
The Coca-Cola Company
71.72-0.030.341922-3-2695
Microsoft Corporation
83.810.730.021985-3-2596
Alcoa Inc
29.890.53-0.081954-4-1097
United Technologies Corporation
67.270.280.031923-1-798
Caterpillar Inc.
64.72-0.08-0.231911-12-1199



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 use
  • select-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