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. 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 CCS 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.

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