Best Table Sort Ever
From BriansWiki
Contents |
[edit] Need to sort?
SortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows.
[edit] Instructions
To start using SortedTable all you need is:
- have a valid XHTML document,
- have a valid table* in this document
- download the following javascripts to a folder on your server: Event.js and SortedTable.js (see NOTE below)
- add a class="sorted" to the table
- modify table to add "id" and "axis" parameters: Table Requirements
- add the sort and colorize code to the html: Sort and Colorize
- reference the scripts on the page:
<script type="text/javascript" src="../scripts/SortedTable.js"></script> <script type="text/javascript" src="../scripts/Event.js"></script>
[edit] NOTE:
I modified SortedTable.js version to use an arrow to indicate currently sorted columns, this makes it is easier for color-challenged people to see what is sorted. There is a copy of it located here if you want to use it: NewSortedTable
[edit] Style
You need to define colors for the alternating and current rows to work; here is our Intranet's standard table style:
<style type="text/css">
/* for best table sort ever */
tr {
border:0;
padding:0;
margin:0;
}
td, th {
border:0;
padding:2px 6px;
margin:0;
}
td[axis='number'], td[axis='date'] {
text-align:right;
}
th {
white-space:no-wrap;
background-color:#999999;
padding:1px 10px;
color:#ffffff;
}
.odd td {
background-color:#d5daee;
border-right:2px solid #d5daee;
}
.even td {
background-color:white;
border-right:2px solid #fff;
}
.hover td {
background-color:#ffc;
}
.sortedminus {
background-color:#999999;
}
.sortedplus {
background-color:#999999;
}
.selrow td {
background-color:#fc6;
}
</style>
[edit] Table requirements
Your table has to have a header defined with an id for each column like this:
<table id="myTable" class="sorted regroup" cellspacing="0"> <thead> <tr> <th id="JobID" scope="col">JobID</th> <th id="Tech" scope="col">Tech</th> <th id="Install" scope="col">Install</th> <th id="Inspect" scope="col">Inspect</th> <th id="Address" scope="col">Address</th> <th id="City" scope="col">City</th> </tr> </thead>
Make sure that the id is equal to the display text and there are no spaces too; that's a current limitation of the script.
Don't forget to add the 'cellspacing="0"' attribute in the table tag; this closes up the ugly gaps between cells and gives the table a clean 'googly' look!
You also need each column to define an axis (data type) and header id like this:
<tr> <td axis="string" headers="JobID">#JobID#</td> <td axis="string" headers="Tech">#TechName#</td> <td axis="date" headers="Install">#dateFormat(DateInstall,"mm/dd/yy")#</td> <td axis="date" headers="Inspect">#dateFormat(DateInspected,"mm/dd/yy")#</td> <td axis="string" headers="Address">#Address1#</td> <td axis="string" headers="City">#City#</td> </tr>
[edit] Colorize
The javascript doesn't add alternate color rows by default (the author believes that has nothing to do with sorting) but in reality we almost always want this feature, so once the page is loaded you need to call the SortFormat function, here's an example:
<script type="text/javascript">
mySorted = new SortedTable();
mySorted.colorize = function() {
for (var i=0;i<this.elements.length;i++) {
if (i%2){
this.changeClass(this.elements[i],'even','odd');
} else {
this.changeClass(this.elements[i],'odd','even');
}
}
}
mySorted.onsort = mySorted.colorize;
mySorted.onmove = mySorted.colorize;
mySorted.colorize();
</script>
NOTE: If you use this function, don't use the single line:
<script type="text/javascript">onload = function() {var myTable = new SortedTable();}</script>
That is suggested by the author (it never worked for me anyway). It one approach or the other!
[edit] Special considerations
This should work if you have more than one table on a page that is loaded normally, but if you are loading the page via an AJAX call, you will need to create a unique 'mySorted' object, something like 'table1Sorted' and 'table2Sorted'. If you don't, then the any operations on a row will be ambiguous.
[edit] Moving Rows
If you want to a let the user move a row up or down, you can do something like this:
<a href="javascript:table1Sorted.move(1)">up</a> <a href="javascript:table1Sorted.move(-1)">down</a>
NOTE: If you are using the move function you will have to add these two lines to the sort function:
sourceTable = new SortedTable('s');
destTable = new SortedTable('d');
[edit] Multiple Tables on the same page
Sorting works on all tables on a form, but colorizing does not, to work around this you need to create explicit sorted table objects and colorize them:
mySorted = new SortedTable('MyTable');
mySorted.colorize = function() {
for (var i=0;i<this.elements.length;i++) {
if (i%2){
this.changeClass(this.elements[i],'even','odd');
} else {
this.changeClass(this.elements[i],'odd','even');
}
}
}
mySorted.onsort = mySorted.colorize;
mySorted.onmove = mySorted.colorize;
mySorted.colorize();
mySorted2 = new SortedTable('MyTable2');
mySorted2.colorize = function() {
for (var i=0;i<this.elements.length;i++) {
if (i%2){
this.changeClass(this.elements[i],'even','odd');
} else {
this.changeClass(this.elements[i],'odd','even');
}
}
}
mySorted2.onsort = mySorted.colorize;
mySorted2.onmove = mySorted.colorize;
mySorted2.colorize();
[edit] More Examples
[edit] Documentation
[edit] Author
Author of this script is Marko Mrdjenovic.
[edit] Development
To report bugs or track development check the blog .
