Permalink
Browse files

Commuting groups table pulls data from JSON and data can be order asc…

…/desc by column titles
  • Loading branch information...
1 parent 03327ec commit b46375c3d0e20dda0418b7d6e5a22d4682e0055b Ryan DeStefano committed Jan 25, 2012
Showing with 134 additions and 25 deletions.
  1. BIN images/asc-desc-toggle-arrow.png
  2. +1 −25 index.html
  3. +115 −0 javascript.js
  4. +18 −0 style.css
View
BIN images/asc-desc-toggle-arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
26 index.html
@@ -64,7 +64,7 @@
<select name="departing-time" id="departing-time"><option value="">Select One</option><option value="0830">8:30 am</option></select>
</fieldset>
</form>
- <table>
+ <table id="groups">
<thead>
<tr>
<th>From</th>
@@ -74,30 +74,6 @@
</tr>
</thead>
<tbody>
- <tr>
- <td>21210</td>
- <td>21224</td>
- <td>8:30 am</td>
- <td>Fast</td>
- </tr>
- <tr>
- <td>21210</td>
- <td>21224</td>
- <td>8:30 am</td>
- <td>Fast</td>
- </tr>
- <tr>
- <td>21210</td>
- <td>21224</td>
- <td>8:30 am</td>
- <td>Fast</td>
- </tr>
- <tr>
- <td>21210</td>
- <td>21224</td>
- <td>8:30 am</td>
- <td>Fast</td>
- </tr>
</tbody>
</table>
<a href="#commuting-group">Want to organize a commuting group?</a>
View
115 javascript.js
@@ -37,4 +37,119 @@ $(document).ready(function() {
});
+
+
+ var commutingGroupsJSON = {
+ "groups" : [
+ {
+ 'From' : '21202',
+ 'To' : '21224',
+ 'Time' : '8:30 am',
+ 'Speed' : 'Fast'
+ },
+ {
+ 'From' : '21201',
+ 'To' : '21224',
+ 'Time' : '8:45 am',
+ 'Speed' : 'Fast'
+ },
+ {
+ 'From' : '21224',
+ 'To' : '21210',
+ 'Time' : '9:00 am',
+ 'Speed' : 'Slow'
+ },
+ {
+ 'From' : '21211',
+ 'To' : '21218',
+ 'Time' : '12:00 pm',
+ 'Speed' : 'Fast'
+ },
+ {
+ 'From' : '21210',
+ 'To' : '21201',
+ 'Time' : '1:15 pm',
+ 'Speed' : 'Fast'
+ },
+ {
+ 'From' : '21218',
+ 'To' : '21201',
+ 'Time' : '2:00 pm',
+ 'Speed' : 'Slow'
+ },
+ {
+ 'From' : '21217',
+ 'To' : '21211',
+ 'Time' : '3:45 pm',
+ 'Speed' : 'Slow'
+ },
+ {
+ 'From' : '21202',
+ 'To' : '21210',
+ 'Time' : '9:30 pm',
+ 'Speed' : 'Fast'
+ },
+ {
+ 'From' : '21202',
+ 'To' : '21224',
+ 'Time' : '10:30 pm',
+ 'Speed' : 'Slow'
+ }
+ ]
+ };
+
+ function createTable() {
+
+ $('#groups tbody *').remove();
+
+ $(commutingGroupsJSON.groups).each(function(index, element) {
+ $('#groups tbody').append('<tr><td> ' + element.From + ' </td> <td> ' + element.To + ' </td> <td> ' + element.Time + ' </td> <td> ' + element.Speed +' </td></tr>');
+ });
+
+ }
+
+ createTable();
+
+ var sort_by = function(field, reverse, primer) {
+
+ var key = function (x) {
+ return primer ? primer(x[field]) : x[field]
+ };
+
+ return function (a,b) {
+ var A = key(a);
+ var B = key(b);
+ return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];
+ }
+ }
+
+ $('th').toggle(function() {
+
+ $('th').removeClass("column-selected-ascending column-selected-descending");
+ $(this).addClass("column-selected-ascending");
+ var tableHeaderValue = $(this).text();
+ if (tableHeaderValue == "Speed") {
+ var orderingMethod = function(tableHeaderValue){return tableHeaderValue.toUpperCase()};
+ }
+ else {
+ var orderingMethod = parseInt;
+ }
+ commutingGroupsJSON.groups.sort(sort_by(tableHeaderValue, true, orderingMethod));
+ createTable();
+ }, function() {
+ $('th').removeClass("column-selected-ascending column-selected-descending");
+ $(this).addClass("column-selected-descending");
+ $(this).addClass("column-selected");
+ var tableHeaderValue = $(this).text();
+ if (tableHeaderValue == "Speed") {
+ var orderingMethod = function(tableHeaderValue){return tableHeaderValue.toUpperCase()};
+ }
+ else {
+ var orderingMethod = parseInt;
+ }
+ commutingGroupsJSON.groups.sort(sort_by(tableHeaderValue, false, orderingMethod));
+ createTable();
+
+ });
+
});
View
18 style.css
@@ -198,6 +198,24 @@ a.back {
color: rgba(120, 120, 120, 1);
font-size: 14px;
}
+#commuting-groups table thead tr th.column-selected-ascending, #commuting-groups table thead tr th.column-selected-descending {
+ color: rgba(60, 60, 60, 1);
+}
+#commuting-groups table thead tr th.column-selected-ascending:after {
+ background-position: top;
+}
+#commuting-groups table thead tr th.column-selected-descending:after {
+ background-position: bottom;
+}
+#commuting-groups table thead tr th.column-selected-ascending:after, #commuting-groups table thead tr th.column-selected-descending:after {
+ content: "";
+ display: inline-block;
+ width: 10px;
+ height: 5px;
+ margin: 0 0 2px 2px;
+ background-image: url('images/asc-desc-toggle-arrow.png');
+ background-repeat: no-repeat;
+}
#commuting-groups table tbody tr {
color: rgba(140, 140, 140, 1);

0 comments on commit b46375c

Please sign in to comment.