4umi.com/web/javascript/tablescroll

Sort ‘n Scroll

Table Javascript

Cells will be cells. But without rows no columns.

That wisdom must be nearly as old as tables themselves. But a table sorted by the touch of a button is something really quite new. Relatively speaking. It opens a world where bits of information can be compared in powerful new ways, where speaking relatively becomes its own absolute universe. But the quality will only be as good as the information itself gets. Where things can be put in the right order with no trouble, the question becomes what the real right order is.

The functions

The below table can be sorted by clicking on a column header. Two javascript elements are responsible for this, the first pointing to the library code file sortable.js, 9.33 KB of generic sorting and some supporting functions, the second one initializing a table with some parameters:

<script src="sortable.js" type="text/javascript"></script> 
<script type="text/javascript">//<![CDATA[
 window.onload = function() {
  initable( 'Music', [ 'rank', 'html', null, null, 'time', 'number', null ], 2, null, 28 );
 }
//]]></script>

The call to the initializing fuction may also be contained in external files, making the script 100% unobtrusive as jargon has it. The html tags themselves need not be touched. However, endless tweaking of sorting results is possible by building individual cells with title or alt attributes or special elements.

Multiple tables on a page are to be initialized separately by calling the function once for each one, which may be done at any time after all involved components have loaded. We chose to wait until the onload event because this is a large page and it receives external hits from visitors with a virginal cache as far as this site is concerned.

The parameters

Think of them as the sacred objects used in initiation ceremonies and rituals. These are the parameters to hand to the initializing function:

  1. a reference to the table object, or a string that corresponds to the id attribute set in the <table> tag. The script will make up an identity if the table does not have one.
  2. an array of data types, corresponding to the columns in the table, defining the sorting algorithm to use in each column. Scripts that work out the type of data by themselves, have proven to be slow, unreliable and difficult to customize. See the tablesort page for the (many) available types of data. New types can also be added for a page. Everything is optional here, columns with no data types for them will default to alphanumeric null.
  3. the index number of the column to mark as sorted initially. If this is the first column, the argument may be left out, and counting starts at 1, but rank is a special data type that doesn't count. You may insert this between any two columns to have the script maintain a ranking column along the data. Our table comes from the server sorted by artist, the second column.
  4. an optional function to run after each reshuffle, for example to manage background colours which this code does not deal with.
  5. The distance of the headers from the top, a number or something that evaluates to one, specifying the offset in pixels. By default, the header row is kept fixed at the top of the viewport when the page is scrolled down, so they stay in view at all times when the rest of the table starts disappearing and can always be clicked no matter how far down the reader has moved. To prevent all repositioning and let the headers scroll out of view like they always have done, pass a boolean false or the string "no", but if there is a banner or (like here) a search form in the way, with this parameter the header row can be told to stay away from the edge.

The currently sorted column header is adorned with the className of sorted and a picture of an arrow is inserted, or flipped upsidedown when the same cell is clicked twice in succession and the order of rows is reversed. Deal with it in CSS style rules. Specifying a lighter colour usually has a strong effect.

A cookie may be set to remember the last sorted column, so that when a user returns, he finds the table as he left it. More details are in the code, also available syntax highlighted.

The table

The example is a bit long to demonstrate the speed of the script and the fixed position of the headers bar. Scroll down and the headers will scroll along. Note that the default data type, null in the above code—although 0 and '' could also be used—compares the text that is read in a cell, ignoring nested tags like the <a> tags in the table. For that is the html type, as active in the column of images.

TypeArtistTitleTimeBytesComments
mp3 Aerosmith Love me two times 03:19 4792320 Doors cover
mp3 Alien Ant Farm Smooth criminal 03:29 3348399 Michael Jackson cover
mp3 America A horse with no name 04:08 3981607
mp3 Art of Noise Moments in love 10:16 9857149
mp3 Bangles Walk like an Egyptian 03:24 3266472
mp3 Beethoven Missa Solemnis in D Major 06:06 4908314
mp3 Beethoven Moonlight sonata 01:13 366276 by Graham Jones
ram Beethoven Symphony no. 9 00:58 116640 Ode to Joy
mp3 Bette Midler The rose 03:36 3471697
mp3 Bill Cosby Noah 07:51 7537185
mp3 Bill Withers Ain't no sunshine when she 's gone 02:35 25949
mp3 Bob Dylan Blowing in the wind 02:25 8432
midi Bob Dylan Go down Moses 03:27 3346134 live 17 October '87
mp3 Bob Dylan Like a rolling stone 08:26 6083813 live
mp3 Bonnie Tyler Total eclipse of the heart 07:01 8435066
mp3 Nikki French Total eclipse 03:41 3543168 Bonnie Tyler mix
mp3 Boomtown Rats I don't like Mondays 04:18 4133744
mp3 Brenda Lee The end of the world 03:09 3038036
mp3 Brychan Llyr Catchee a sola 05:52 5636179
mp3 Bronski Beat Smalltown boy 05:57 5716974
mp3 Burr Settles Your derivative 02:00 1926909
mp3 Cake I will survive 04:59 4797273 Aretha Franklin cover
mp3 Cardigans Lovefool 03:18 3178707
mp3 Cardigans & Tom Jones Burning down the house 03:39 2635151
mp3 Chanticleer Dream dancing 05:37 6750208 Cole Porter cover
mp3 Coolio Gangsta's paradise 04:02 1699291
midi Coolio Gangsta's paradise 04:00 61882 very cool
mp3 Daft Punk Aerodynamic 03:34 5148800
mp3 David Bowie Rebel rebel 04:31 4349945
midi David Bowie Suffragette City 03:25 4349945
mp3 Deep Purple Smoke on the water 04:37 4442112
mp3 Deep Purple Smoke on the water 03:57 3807360 live smoke!
mp3 Dr Alban It 's my life 03:58 3821812
wav Drummers of Burundi Boom boom 00:47 567384
mp3 Eagle Eye Cherry Save tonight 03:59 3353600
mp3 Eagles Hotel California 07:11 6896432 live
wav Eagles Hotel California 06:37 76427
midi Eagles Hotel California 06:34 131777 guitar version
midi Eagles Hotel California 06:30 104977 violin version
mp3 Edith Piaf La vie en rose 03:06 2990080
mp3 Ennio Morricone Once upon a time in the west 03:45 3600384
mp3 Frankie Goes To Hollywood Relax 07:53 7577600 Dance mix
mp3 Grace Jones La vie en rose 06:16 6026936 Edith Piaf cover
mp3 John Waite Missing you 04:04 3915980
wav Kate Bush Violin 01:06 1054614
mp3 Lenny Kravitz Are you gonna go my way 03:43 3579904 Easy listening remix
mp3 Louis Armstrong La vie en rose 03:25 3295608 Edith Piaf cover
mp3 Moby Honey 03:15 3135078 Moby's 118 mix
mp3 Moby Natural blues 04:13 4060473 from ‘Play’
midi Moussorgsky Night on Bald Mountain 11:55 166198
midi Moussorgsky Pictures at an exhibition 07:02 41628 The gate of Kiev
mp3 Murray Head One night in Bangkok 05:02 4837162 from ‘Chess’
mp3 Nick Cave & Kylie Minogue Where the wild roses grow 03:57 3801216
midi No Doubt Don't speak 04:26 60188
midi No Doubt Don't speak 05:51 107359 techno mix
mp3 No Doubt End of the world 00:44 717940 live REM cover
mp3 Offspring Why don't you get a job 02:51 3432278
mp3 Otis Redding Ain't no sunshine when she 's gone 02:07 1778103 Bill Withers cover
mp3 Pet Shop Boys Twist in my sobriety 06:56 8333305 Tanita Tikaram cover
mp3 Peter Gabriel Sledgehammer 04:55 4734353
mp3 Philip Glass The grid 1998 21:23 20530990 Koyaanisqatsi
wma Pink Floyd Live at the Yankee Stadium 02:23:05 104411109 Every byte is right!
mp3 Pjotr Leschenko Serdtse mamy 02:54 2789459 Russian tango
mp3 Portishead Stranger 05:20 5129195 live at Roseland NYC
mp3 Queen Keep yourself alive 05:26 5225453 live in Shizuoka Japan 29 April '75
mp3 Queen Doing all right 04:08 3981061
karaoke! Queen Great king Rat 05:40 5440156 karaoke version!
mp3 Queen Jesus 03:45 3601136
mp3 Queen White queen 05:58 5737453 live in Seattle 13-03-'77
mp3 Queen Ogre battle 04:08 3972284
midi Queen Queen II side black 14:21 172993 four side black tracks
mp3 Red Hot Chili Peppers Californication 05:20 5133918
mp3 Republica Drop dead gorgeous 03:58 3808026
mp3 Revey Allélouya 00:27 220055
mp3 Revey Dë l'àtri lâ 00:39 317231
wav Revey Complainte de la blanche biche 00:21 3708938
mp3 Revey Pastourelle 01:12 581381 Transglobal mix
mp3 Rickie Martin Living la vida loca 02:38 1900672
mp3 Ricky Martin Maria 04:28 4297456
midi Santana Smooth 03:55 74044
mp3 Santana & Rob Thomas Smooth 03:57 5705616
mp3 Skunk Anansie Hedonism 03:27 3316924
mp3 Sly & The Family Stone Papa was a rolling stone 06:52 6600410 The Temptations cover
mp3 Sound Garden Come together 05:51 5626992 Beatles cover
mp3 Tanita Tikaram Twist in my sobriety 04:52 7026857
mp3 U2 Dancing queen 04:04 3422208 live Abba cover
mp3 U2 Redemption song 01:53 1822237 live Bob Marley cover
mp3 U2 Mysterious ways 05:14 4397476 On your knees boy!
midi U2 Discothèque 05:16 79244
mov U2 Discothèque 00:29 2397261
mp3 U2 Please 05:49 2795520 Single version
midi U2 Please 05:03 21832
mov U2 Staring at the sun 00:28 1178162
mp3 U2 Staring at the sun 04:36 4429949
midi U2 Wake up dead man 04:39 27225
midi UB40 Kingston Town 04:07 47384
mp3 William S. Burroughs Is everybody in 02:42 3911680 from ‘Stoned Immaculate’
mp3 Yello Oh yea 03:01 2909956
mp3 Yes Owner of a lonely heart 03:52 3723173
mp3 Yes Perpetual change 02:35 3100340 live in Buenos Aires '94