Skip to content
This repository has been archived by the owner on Jan 10, 2023. It is now read-only.

Commit

Permalink
Switch to datatables.net table script
Browse files Browse the repository at this point in the history 
Works better with Bootstrap. Still need to fix sorting on some columns.
  • Loading branch information
@powdahound
powdahound committed Nov 22, 2012
1 parent 8b06b4b commit d064c6c
Show file tree
Hide file tree
Showing 12 changed files with 96 additions and 125 deletions.
Binary file removed www/asc.gif
View file
Binary file not shown.
Binary file removed www/bg.gif
View file
Binary file not shown.
Binary file added www/datatables/images/sort_asc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added www/datatables/images/sort_asc_disabled.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added www/datatables/images/sort_both.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added www/datatables/images/sort_desc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added www/datatables/images/sort_desc_disabled.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 19 additions & 40 deletions www/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,24 @@ body {
color: #333;
}

/****************************** tablesorter ******************************/
table.tablesorter {
margin-top: 20px;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
background-color: #C8E3F2;
border: 1px solid #FFF;
border-left: 0;
padding: 10px 5px;
vertical-align: middle;
/* DataTables: http://datatables.net/blog/Twitter_Bootstrap_2 */

table.table {
margin-top: 15px;
}
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 8px 5px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr:hover td {
background-color: #F6DCD7 !important;
}
table.tablesorter tbody tr.odd td {
background-color: #eee;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
*cursor: hand;
}

table.table thead .sorting { background: url('datatables/images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('datatables/images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('datatables/images/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('datatables/images/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('datatables/images/sort_desc_disabled.png') no-repeat center right; }
79 changes: 37 additions & 42 deletions www/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,54 +32,49 @@ function change_cost(duration) {

}

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: "ioperf",
is: function(s) { return false; },
format: function(s) {
// format your data for normalization
if (s == "Low") {
return 0;
} else if (s == "Moderate") {
return 1;
} else if (s == "High") {
return 2;
} else {
return 3;
$(function() {
$(document).ready(function() {
$('#data').dataTable({
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"aoColumnDefs": [
{
"aTargets": ["ioperf"],
"sType": "span-sort"
}
},
// set type, either numeric or text
type: "numeric"
});
]
});
});

$(function() {
$(".tablesorter").tablesorter({
headers: {
/* memory */
1: {
sorter: "digit"
},
/* compute units */
2: {
sorter: "digit"
},
/* storage */
3: {
sorter: "digit"
},
/* i/o perf */
5: {
sorter: "ioperf"
}
},
// sortList: [[0,1]],
widgets: ["zebra"]
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
});

change_cost('hourly');
});

$("#cost-dropdown li").bind("click", function(e) {
change_cost(e.target.getAttribute("duration"));
});

// sorting for IO perf column
// http://datatables.net/plug-ins/sorting#hidden_title
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"span-sort-pre": function(elem) {
var matches = elem.match(/sort="(.*?)"/);
if (matches) {
console.log(elem + " - " + parseInt(matches[1], 10));
return parseInt(matches[1], 10);
}
return 0;
},

"span-sort-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"span-sort-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
Binary file removed www/desc.gif
View file
Binary file not shown.
79 changes: 40 additions & 39 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,29 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
</div>
</div>

<table cellspacing="0" class="tablesorter">
<table cellspacing="0" class="table table-bordered table-hover table-condensed" id="data">
<thead>
<tr>
<th>Name</th>
<th>Memory</th>
<th><abbr title="One EC2 Compute Unit provides the equivalent CPU capacity of a 1.0-1.2 GHz 2007 Opteron or 2007 Xeon processor.">Compute Units</abbr></th>
<th>Storage</th>
<th>Platform</th>
<th>I/O Perf</th>
<th class="ioperf">I/O Perf</th>
<th><abbr title="Adding additional IPs requires launching the instance in a VPC.">Max IPs</abbr></th>
<th>API Name</th>
<th>Linux cost</th>
<th>Windows cost</th>
</tr>
</thead>
<tbody>
<tr class="even">
<tr>
<td>Standard Small</td>
<td style="text-align: right;">1.70 GB</td>
<td>1 (1 core x 1 unit)</td>
<td style="text-align: right;">160 GB</td>
<td style="text-align: right;">32/64-bit</td>
<td>Moderate</td>
<td><span sort="1"><span sort="1">Moderate</span></span></td>
<td>8</td>
<td>m1.small</td>
<td class="cost" hour_cost="0.065">$0.065 per hour</td>
Expand All @@ -77,32 +77,31 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>2 (1 core x 2 units)</td>
<td style="text-align: right;">410 GB</td>
<td style="text-align: right;">32/64-bit</td>
<td>Moderate</td>
<td><span sort="1">Moderate</span></td>
<td>12</td>
<td>m1.medium</td>
<td class="cost" hour_cost="0.13">$0.13 per hour</td>
<td class="cost" hour_cost="0.23">$0.23 per hour</td>
<td></td>
</tr>
<tr>
<td>Standard Large</td>
<td style="text-align: right;">7.50 GB</td>
<td>4 (2 cores x 2 units)</td>
<td style="text-align: right;">850 GB (2 x 420 GB)</td>
<td style="text-align: right;">64-bit</td>
<td>High (EBS Optimized)</td>
<td><span sort="3">High (EBS Optimized)</span></td>
<td>30</td>
<td>m1.large</td>
<td class="cost" hour_cost="0.26">$0.26 per hour</td>
<td class="cost" hour_cost="0.46">$0.46 per hour</td>
</tr>
<tr class="even">
<tr>
<td>Standard Extra Large</td>
<td style="text-align: right;">15.00 GB</td>
<td>8 (4 cores x 2 units)</td>
<td style="text-align: right;">1690 GB (4 x 420 GB)</td>
<td style="text-align: right;">64-bit</td>
<td>High (EBS Optimized)</td>
<td><span sort="3">High (EBS Optimized)</span></td>
<td>60</td>
<td>m1.xlarge</td>
<td class="cost" hour_cost="0.52">$0.52 per hour</td>
Expand All @@ -114,7 +113,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>2 (only for short bursts)</td>
<td style="text-align: right;">0 GB (EBS only)</td>
<td style="text-align: right;">32/64-bit</td>
<td>Low</td>
<td><span sort="0">Low</span></td>
<td>1</td>
<td>t1.micro</td>
<td class="cost" hour_cost="0.02">$0.02 per hour</td>
Expand All @@ -126,7 +125,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>6.5 (2 cores x 3.25 units)</td>
<td style="text-align: right;">420 GB</td>
<td style="text-align: right;">64-bit</td>
<td>Moderate</td>
<td><span sort="1">Moderate</span></td>
<td>60</td>
<td>m2.xlarge</td>
<td class="cost" hour_cost="0.45">$0.45 per hour</td>
Expand All @@ -138,7 +137,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>13 (4 cores x 3.25 units)</td>
<td style="text-align: right;">850 GB</td>
<td style="text-align: right;">64-bit</td>
<td>High</td>
<td><span sort="2">High</span></td>
<td>120</td>
<td>m2.2xlarge</td>
<td class="cost" hour_cost="0.90">$0.90 per hour</td>
Expand All @@ -150,7 +149,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>26 (8 cores x 3.25 units)</td>
<td style="text-align: right;">1690 GB (2 x 840 GB)</td>
<td style="text-align: right;">64-bit</td>
<td>High (EBS Optimized)</td>
<td><span sort="3">High (EBS Optimized)</span></td>
<td>240</td>
<td>m2.4xlarge</td>
<td class="cost" hour_cost="1.80">$1.80 per hour</td>
Expand All @@ -162,7 +161,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>13 (4 cores x 3.25 units)</td>
<td style="text-align: right;">0 GB (EBS only)</td>
<td style="text-align: right;">64-bit</td>
<td>Moderate</td>
<td><span sort="1">Moderate</span></td>
<td>60</td>
<td>m3.xlarge</td>
<td class="cost" hour_cost="0.58">$0.58 per hour</td>
Expand All @@ -174,7 +173,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>26 (8 cores x 3.25 units)</td>
<td style="text-align: right;">0 GB (EBS only)</td>
<td style="text-align: right;">64-bit</td>
<td>High</td>
<td><span sort="2">High</span></td>
<td>120</td>
<td>m3.2xlarge</td>
<td class="cost" hour_cost="1.16">$1.16 per hour</td>
Expand All @@ -186,7 +185,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>5 (2 cores x 2.5 units)</td>
<td style="text-align: right;">350 GB</td>
<td style="text-align: right;">32/64-bit</td>
<td>Moderate</td>
<td><span sort="1">Moderate</span></td>
<td>12</td>
<td>c1.medium</td>
<td class="cost" hour_cost="0.165">$0.165 per hour</td>
Expand All @@ -198,7 +197,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>20 (8 cores x 2.5 units)</td>
<td style="text-align: right;">1690 GB (4 x 420 GB)</td>
<td style="text-align: right;">64-bit</td>
<td>High</td>
<td><span sort="2">High</span></td>
<td>60</td>
<td>c1.xlarge</td>
<td class="cost" hour_cost="0.66">$0.66 per hour</td>
Expand All @@ -210,7 +209,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>33.5 (2 x Intel <abbr title="Quad-core Nehalem architecture">Xeon X5570</abbr>)</td>
<td style="text-align: right;">1690 GB (2 x 840 GB)</td>
<td style="text-align: right;">64-bit</td>
<td><abbr title="10 Gigabit Ethernet">Very High</abbr></td>
<td><span sort="4"><abbr title="10 Gigabit Ethernet">Very High</abbr></sort></td>
<td>1</td>
<td>cc1.4xlarge</td>
<td class="cost" hour_cost="1.30">$1.30 per hour</td>
Expand All @@ -222,7 +221,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>88 (2 x Intel <abbr title="Eight-core Sandy Bridge architecture">Xeon E5-2670</abbr>)</td>
<td style="text-align: right;">3370 GB (4 x 840 GB)</td>
<td style="text-align: right;">64-bit</td>
<td><abbr title="10 Gigabit Ethernet">Very High</abbr></td>
<td><span sort="4"><abbr title="10 Gigabit Ethernet">Very High</abbr></sort></td>
<td>240</td>
<td>cc2.8xlarge</td>
<td class="cost" hour_cost="2.40">$2.40 per hour</td>
Expand All @@ -234,7 +233,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>33.5 (2 x Intel <abbr title="Quad-core Nehalem architecture">Xeon X5570</abbr>)</td>
<td style="text-align: right;">1690 GB (2 x 840 GB)</td>
<td style="text-align: right;">64-bit</td>
<td><abbr title="10 Gigabit Ethernet">Very High</abbr></td>
<td><span sort="4"><abbr title="10 Gigabit Ethernet">Very High</abbr></sort></td>
<td>1</td>
<td>cg1.4xlarge</td>
<td class="cost" hour_cost="2.10">$2.10 per hour</td>
Expand All @@ -246,7 +245,7 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
<td>35 (2 x Intel <abbr title="Quad-core Nehalem architecture">Xeon X5570</abbr>)</td>
<td style="text-align: right;">2048 GB (2 x 1024 GB SSD)</td>
<td style="text-align: right;">64-bit</td>
<td><abbr title="10 Gigabit Ethernet">Very High</abbr></td>
<td><span sort="4"><abbr title="10 Gigabit Ethernet">Very High</abbr></sort></td>
<td>1</td>
<td>hi1.4xlarge</td>
<td class="cost" hour_cost="3.10">$3.10 per hour</td>
Expand All @@ -255,23 +254,25 @@ <h1>EC2Instances.info <small>Easy Amazon EC2 Instance Comparison</small></h1>
</tbody>
</table>

<div id="footer">
Made by <a href="http://twitter.com/powdahound" target="_blank">@powdahound</a> /
<a href="https://github.com/powdahound/ec2instances.info" target="_blank">Fork on GitHub</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript" charset="utf-8"></script>
<script src="default.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4372467-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div id="footer">
Made by <a href="http://twitter.com/powdahound" target="_blank">@powdahound</a> /
<a href="https://github.com/powdahound/ec2instances.info" target="_blank">Fork on GitHub</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="default.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4372467-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Loading

0 comments on commit d064c6c

Please sign in to comment.