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.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 : false, // show Filter Option at the bottom of the table
paginate : 5 // Number of item by table : (Not implemented yet)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="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:'top'});
</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.