Overview
What's New
Usage
Examples
Download
Contact me

Overview

TableOrderer.js is a simple script based on prototype 1.6.0. It allows you to dynamically create Sortable HTML Table.
You only have to define an array of object in javascript or generate a JSON object that can be use by the script as datasource.

What's new

V 1.2.20090611 (June 11 2009) Version created by Paul (paul[at]leadiv.com). and in place at http://www.cnn.com/interactive/2009/06/us/chrysler.dealerships/index.html

Added some messages for pagination
Fixed caching so that it is now effective.
Added the Search tool. It is like the Filter tool but searches the whole record instead of just column.
Added a messages (msgs) global variable for keeping all text delivered to the user in one place. In the future it might be useful for i18n type stuff.
Added a message to the user when there are no results displayed on an updateTable call.
Added documentation to the unpacked version of the TableOrderer.js
Added First and Last pagination buttons
Integrated a caching feature so that paging and ordering operations are only using cached data. The cached is updated when filtered. This will hopefully allow larger datasets to be used.
Added a new option called pageCount for number of items by table
Changed paginate to define where the pagination should show up (similar to filter option)
Added a new tools object to keep the state of the filter and pagination tools instead of querying the DOM as much.
Broke addObserver into addToolsObserver and addTableObserver since the tools (filter and pagination) have its HTML elements created once where the table elements are created over and over.
filterData now has two approaches: (1) If pagination is turned ON then recreate the rows using updateTable. Somewhat costly due to creating new elements but hopefully offset by a smaller amount of rows being shown. (2) If pagination is turned OFF then just hiding the rows, which is much faster.
createTable and createRows are only used the first time the table is created. It sets everything up. updateTable and updateRows just update the data information on the screen.
Pagination and filtering are now independent of each other. Which means you can have pagination turned on while filtering turned off and vice-versa. And pagination can be on top while filtering on the bottom or vice-versa.
(Tested on Firefox 3, IE7 and IE8)

V 1.1 (August 30 2007) : New functionnalities :

New option "unsortedColumn" allow you to make one or several columns unsortable.
New option "filter" : when set to true add a form at the bottom of the table allowing you to filter data
(Tested on Firefox Mac not Tested on IE too late for now I'll test it tomorrow ;-))

V 1.0 (August 28 2007) : first release

Usage

Installation

Just add the following code in the header of your page :

<script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>
<script type="text/javascript" language="JavaScript" src="js/TableOrderer.js"></script>
<link rel="stylesheet" href="css/tableorderer.css" type="text/css" media="screen" />

Options

	data: false, 			// array of data
	url: false, 			// url to a JSON application containing the data
	allowMultiselect : true,	// Not implemented yet
	unsortedColumn : [],		// array of column you don't want to sort
	dateFormat : 'd', 		// d|m ; d => dd/mm/yyyy; m => mm/dd/yyyy
	filter : 'bottom',		// show Filter Option at the bottom of the table
	paginate : false,		// show Pagination Option: false|top|bottom
	pageCount : 5,			// Number of items to show per page. paginate must not be false
	search : false			// show Search Option: false|top|bottom

To do

Support of different date formats
Make line selectable and get selected value (almost done)
Leave a comment on my blog if you have idea of improvement

1st Example

Load of the data via Ajax
In this examle data.php is a simple file that returns a JSON variable

Data.php :

<?php
header("Content-Type: application/json");
echo '[ 
	{"name": "A","float": 1.1,"integer": 4880,"date": "15/02/2007"},
	{"name": "B", "float": 1.2,"integer": 254,"date": "15/02/2007"},
	{"name": "C", "float": 541.22,"integer": 312,"date": "31/02/1987"},
	{"name": "D", "float": 145.12,"integer": 987,"date": "15/05/2005"},
	{"name": "E", "float": 112.1,"integer": 43,"date": "15/02/2012"},
	{"name": "F", "float": 12.3,"integer": 121,"date": "17/09/1976"},
	{"name": "G", "float": 10.4,"integer": 21,"date": "31/12/2006"},
	{"name": "H", "float": 4.3,"integer": 39,"date": "01/02/1997"},
	{"name": "I", "float": 5.2,"integer": 78,"date": "15/02/2008"}
	]';
?>

<div id="container""></div>
<script>new TableOrderer('container',{url : 'data.php'});</script>

2nd Example

The data are set within the page and the div have a width of 500px:

<div id="container2" style="width:500px;"></div>
<script>
data = new Array(
	{"name": "A", "float": 1.1, "integer": 4880, "date": "15/02/2007"},
	{"name": "B", "float": 1.2, "integer": 254, "date": "15/02/2007"},
	{"name": "C", "float": 541.22, "integer": 312, "date": "31/02/1987"},
	{"name": "D", "float": 145.12, "integer": 987, "date": "15/05/2005"});

	new TableOrderer('container2',{data : data});
</script>

3rd Example

A 5 columns Example with column "city" unsortable .

It is possible to make a column unsortable once the table is created by calling the "makeColumnUnsortable" method

<div id="container3"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});
</script>

First way to make data unsortable :

<script type="text/javascript" language="JavaScript">
	new TableOrderer('container3',{data : data3,unsortedColumn : ['city']});
</script>

Second way to make data unsortable :

<script type="text/javascript" language="JavaScript">
	var mytable = new TableOrderer('container3',{data : data3});
	mytable.makeColumnUnsortable('city');
</script>

4th Example

Data are the same as for the previous example but filter options are activate and set to 'bottom'.

<div id="container4"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});

new TableOrderer('container4',{data : data3, filter:'bottom'});
</script>

5th Example

Data are the same as for the previous example but filter options are activate and set to 'top'.

<div id="container5"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});

new TableOrderer('container5',{data : data3, filter:'top'});
</script>

6th Example

Pagination is set with the default (5 items per page) and placed on the 'top' of the table.

<div id="container6"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});

new TableOrderer('container6',{data : data3, pagination:'top'});
</script>

7th Example

Pagination is set to 7 items per page and placed on the 'bottom' of the table. A filter is also used and placed at the 'top' of the table.

<div id="container7"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});

new TableOrderer('container7',{data : data3, filter:'top', pagination:'bottom', pageCount:7});
</script>

8th Example

This table features a search box which will search all columns for the query instead of just one column. The search box is placed at the top of the table.

<div id="container8"></div>
<script type="text/javascript" language="JavaScript">
data3 = new Array(
	{"last_name": "SMITH", "first_name": "John", "birth_date": "15/02/1976", "rank": 1, "city": "Dallas"},
	{"last_name": "JOHNSON", "first_name": "David", "birth_date": "31/02/1987", "rank": 2, "city": "Washington"},
	{"last_name": "WILLIAMS", "first_name": "Bill", "birth_date": "02/12/1976", "rank": 3, "city": "New-York"},
	{"last_name": "JONES", "first_name": "Roger", "birth_date": "05/11/1967", "rank": 4, "city": "Chicago"},
	{"last_name": "BROWN", "first_name": "Daniel", "birth_date": "14/04/1945", "rank": 5, "city": "Las-Vegas"},
	{"last_name": "DAVIS", "first_name": "Mickael", "birth_date": "31/08/1975", "rank": 6, "city": "Cincinatti"},
	{"last_name": "MILLER", "first_name": "Brad", "birth_date": "22/09/1976", "rank": 7, "city": "Seattle"},
	{"last_name": "WILSON", "first_name": "Greg", "birth_date": "12/03/1977", "rank": 8, "city": "Denver"},
	{"last_name": "MOORE", "first_name": "Noah", "birth_date": "26/01/1978", "rank": 9, "city": "Phoenix"},
	{"last_name": "TAYLOR", "first_name": "Mitch", "birth_date": "17/07/1957", "rank": 10, "city": "Buffalo"});

new TableOrderer('container8',{data : data3, search:'top', pagination:'bottom', pageCount:7});
</script>

Download

tableorderer.zip (Prototype 1.6 included)

Contact

My name is Greg SCHURGAST, I'm a french Project Manager leaving in Paris, France. Feel free to post a comment on my blog for remarks or improvement.