The Post
Moosort - Mootools table-sorting
Here's a nice little Mootools-based table-sorting class I created the other day to get myself more familiar with Mootools v.1.2
Configuration options
The Class comes with several options you can configure by initializing it with an options object:
- columnsFormat (array) - An array of formats for each table-column. Supported formats are number,string date and null (for non-sortable columns)
- dateFormat (string) - The date format used to parse strings as dates. Possible values are: 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD'. Defaults to 'DD-MM-YYYY'
- profile (boolean) - Show or hide a profile console that prints the time it took to sort the table. Useful for debugging purposes
- classes (json) - A JSON object for adding CSS classes to the sorted table:
- evenrow - The CSS class added to evenrow table rows
- oddrow - The CSS class added to odd table rows
- rowhover - The CSS class added to table rows on mouseover
- console - The CSS class added to the debugging console
Usage
To initialize the class, you simply need to instanciate it and pass a reference to the sortable table as the first argument, and an options object as the second argument (See "Configuration options" above)
<script type="text/javascript">
function init(){
var s = new Moosort($('sortable'),{
columnsFormat:['number','string','date'],
profile:true
});
/*
Now we tell the class that the first column is already has already been
sorted, which means that sorting on that row is done by reversing the
row order, rather than executing the sorting algorithm (which is slower)
*/
s.setSortStatus(0,true);
}
window.addEvent('load',init)
</script>
Demo
| id | Word | Date |
|---|---|---|
| 0 | Jerry | 02-09-2008 |
| 1 | Carey | 24-09-2008 |
| 2 | Finney | 28-11-2008 |
| 3 | Henry | 19-05-2008 |
| 4 | Patrick | 26-11-2008 |
| 5 | Patrick | 25-06-2008 |
| 6 | Finney | 17-09-2008 |
| 7 | Fox | 31-10-2008 |
| 8 | Horwitz | 19-11-2008 |
| 9 | Horwitz | 31-05-2008 |
| 10 | Jerry | 21-06-2008 |
| 11 | Charlse | 13-09-2008 |
| 12 | Guru | 08-02-2008 |
| 13 | Coffee | 19-05-2008 |
| 14 | Horwitz | 15-11-2008 |
| 15 | Alex | 29-04-2008 |
| 16 | Waters | 20-10-2008 |
| 17 | Horse | 13-12-2008 |
| 18 | Horse | 08-04-2008 |
| 19 | Charlse | 20-08-2008 |
| 20 | Charlse | 03-10-2008 |
| 21 | Ship | 25-11-2008 |
| 22 | Fox | 30-10-2008 |
| 23 | Inbal | 11-07-2008 |
| 24 | Eric | 07-12-2008 |
| 25 | Funny | 18-02-2008 |
| 26 | Inbal | 10-02-2008 |
| 27 | Collins | 08-09-2008 |
| 28 | Patrick | 17-03-2008 |
| 29 | Hare | 06-05-2008 |
| 30 | Maitland | 29-06-2008 |
| 31 | George | 26-04-2008 |
| 32 | Alex | 19-06-2008 |
| 33 | David | 05-11-2008 |
| 34 | More | 02-11-2008 |
| 35 | Curry | 07-06-2008 |
| 36 | Carey | 11-11-2008 |
| 37 | Books | 01-12-2008 |
| 38 | Waves | 07-05-2008 |
| 39 | Fred | 18-02-2008 |
| 40 | Horse | 01-06-2008 |
| 41 | Patrick | 09-11-2008 |
| 42 | Carey | 23-01-2008 |
| 43 | Principle | 19-03-2008 |
| 44 | Tongue | 16-09-2008 |
| 45 | Collins | 30-06-2008 |
| 46 | Henry | 26-09-2008 |
| 47 | Books | 24-04-2008 |
| 48 | Expo | 06-02-2008 |
| 49 | Waves | 10-06-2008 |
| 50 | George | 24-12-2008 |
| 51 | Finney | 19-06-2008 |
| 52 | Hare | 21-09-2008 |
| 53 | Inbal | 28-07-2008 |
| 54 | Eric | 19-07-2008 |
| 55 | Dwarf | 01-08-2008 |
| 56 | Funny | 23-11-2008 |
| 57 | Maitland | 01-06-2008 |
| 58 | Bernard | 04-01-2008 |
| 59 | Carey | 19-11-2008 |
| 60 | Books | 18-04-2008 |
| 61 | Maitland | 01-09-2008 |
| 62 | Goal | 24-05-2008 |
| 63 | Expo | 11-11-2008 |
| 64 | More | 29-11-2008 |
| 65 | Collins | 17-06-2008 |
| 66 | Jerry | 14-12-2008 |
| 67 | Ship | 28-04-2008 |
| 68 | Ship | 30-05-2008 |
| 69 | Goal | 27-08-2008 |
| 70 | Funny | 04-03-2008 |
| 71 | Bernard | 26-07-2008 |
| 72 | Bernard | 07-06-2008 |
| 73 | Principle | 02-02-2008 |
| 74 | Fox | 29-08-2008 |
| 75 | Jerry | 12-08-2008 |
| 76 | Magic | 10-09-2008 |
| 77 | Collins | 18-07-2008 |
| 78 | Goal | 29-04-2008 |
| 79 | Ghost | 18-04-2008 |
| 80 | Tea | 25-10-2008 |
| 81 | Principle | 11-11-2008 |
| 82 | Hare | 26-01-2008 |
| 83 | Ghost | 29-11-2008 |
| 84 | Licking | 17-01-2008 |
| 85 | Guru | 06-02-2008 |
| 86 | Henry | 28-10-2008 |
| 87 | Horse | 14-10-2008 |
| 88 | Jerry | 24-10-2008 |
| 89 | Waters | 01-09-2008 |
| 90 | Dwarf | 26-06-2008 |
| 91 | Fred | 22-04-2008 |
| 92 | Trim | 22-01-2008 |
| 93 | More | 18-12-2008 |
| 94 | Finney | 19-11-2008 |
| 95 | Goal | 24-10-2008 |
| 96 | Bernard | 17-01-2008 |
| 97 | Waters | 12-08-2008 |
| 98 | Inbal | 05-09-2008 |
| 99 | Alex | 26-09-2008 |
| 100 | James | 09-03-2008 |
| 101 | Eric | 20-07-2008 |
| 102 | Curry | 20-03-2008 |
| 103 | Inbal | 19-09-2008 |
| 104 | Tongue | 15-02-2008 |
| 105 | Expo | 09-02-2008 |
| 106 | Horwitz | 10-03-2008 |
| 107 | Guru | 29-03-2008 |
| 108 | Henry | 19-09-2008 |
| 109 | George | 09-11-2008 |
| 110 | James | 17-02-2008 |
| 111 | Funny | 04-02-2008 |
| 112 | Charlse | 12-11-2008 |
| 113 | Coffee | 04-04-2008 |
| 114 | Horwitz | 09-04-2008 |
| 115 | Sea | 12-12-2008 |
| 116 | Charlse | 19-04-2008 |
| 117 | Inbal | 26-03-2008 |
| 118 | Fred | 16-06-2008 |
| 119 | Goal | 13-10-2008 |
| 120 | James | 16-01-2008 |
| 121 | Tea | 21-07-2008 |
| 122 | Principle | 17-09-2008 |
| 123 | James | 27-06-2008 |
| 124 | Maitland | 06-11-2008 |
| 125 | Expo | 04-09-2008 |
| 126 | Licking | 12-10-2008 |
| 127 | Dwarf | 17-04-2008 |
| 128 | Horwitz | 31-08-2008 |
| 129 | Principle | 25-07-2008 |
| 130 | Carey | 27-10-2008 |
| 131 | Coffee | 14-07-2008 |
| 132 | Finney | 05-05-2008 |
| 133 | Licking | 21-08-2008 |
| 134 | Sea | 16-12-2008 |
| 135 | Eric | 07-07-2008 |
| 136 | Charlse | 02-07-2008 |
| 137 | More | 10-02-2008 |
| 138 | Eric | 29-06-2008 |
| 139 | Waters | 15-05-2008 |
| 140 | Waves | 09-08-2008 |
| 141 | Hair | 25-05-2008 |
| 142 | Bernard | 07-10-2008 |
| 143 | Henry | 27-10-2008 |
| 144 | Ghost | 26-08-2008 |
| 145 | Finney | 13-08-2008 |
| 146 | Magic | 29-10-2008 |
| 147 | Hair | 01-04-2008 |
| 148 | Licking | 15-04-2008 |
| 149 | Guru | 25-04-2008 |
| 150 | Horwitz | 13-02-2008 |
| 151 | Magic | 25-10-2008 |
| 152 | Inbal | 18-11-2008 |
| 153 | Trim | 11-03-2008 |
| 154 | More | 02-03-2008 |
| 155 | Maitland | 20-07-2008 |
| 156 | Curry | 12-02-2008 |
| 157 | Magic | 20-10-2008 |
| 158 | Trim | 30-10-2008 |
| 159 | Bernard | 09-09-2008 |
| 160 | Ghost | 13-01-2008 |
| 161 | Maitland | 07-09-2008 |
| 162 | Bernard | 04-02-2008 |
| 163 | Hair | 10-10-2008 |
| 164 | Eric | 13-04-2008 |
| 165 | Waters | 29-07-2008 |
| 166 | Magic | 02-04-2008 |
| 167 | Tongue | 28-12-2008 |
| 168 | Magic | 22-07-2008 |
| 169 | Books | 12-09-2008 |
| 170 | Sea | 14-08-2008 |
| 171 | Henry | 04-12-2008 |
| 172 | Patrick | 08-01-2008 |
| 173 | Books | 01-10-2008 |
| 174 | Guru | 08-10-2008 |
| 175 | Carey | 26-10-2008 |
| 176 | Alex | 04-05-2008 |
| 177 | Henry | 02-05-2008 |
| 178 | David | 20-01-2008 |
| 179 | Sea | 10-08-2008 |
| 180 | James | 29-06-2008 |
| 181 | Trim | 27-09-2008 |
| 182 | Ship | 28-02-2008 |
| 183 | Waters | 19-09-2008 |
| 184 | Waters | 12-08-2008 |
| 185 | Henry | 04-11-2008 |
| 186 | Collins | 16-02-2008 |
| 187 | Fox | 28-05-2008 |
| 188 | Alex | 29-07-2008 |
| 189 | Waves | 17-05-2008 |
| 190 | Charlse | 31-07-2008 |
| 191 | Eric | 21-03-2008 |
| 192 | Guru | 26-01-2008 |
| 193 | Tea | 18-01-2008 |
| 194 | Horwitz | 06-01-2008 |
| 195 | Hare | 04-04-2008 |
| 196 | Sea | 07-05-2008 |
| 197 | Fred | 18-07-2008 |
| 198 | Henry | 02-10-2008 |
| 199 | David | 13-07-2008 |
Download the script
You can download the script as a zipped file (right-click -> download as)
Compatibility
I tested this Class successfully with the following browsers:
- IE6 / IE7
- Safari 3 (Mac)
- Firefox 2 / 3
- Opera 9.6 (Mac)
The Class requires Mootools v.1.2 Core with at least Class, Class.Extras, Selectors and Element.Event support
The Posts
- Moosort - Mootools table-sorting
- Multi-format Web media player
- Moopick - Mootools-based Color Picker
- Moobox - Mootools-based Modal Window
- Serving Ruby on Rails with Apache2 and mod_fcgid on Leopard
- Setting up Apache, MySQL and PHP 5 with GD support on Leopard
- IE6 Transparent PNG and Dead Links
- Image Replacement For Form Buttons