alt text http://www.freeimagehosting.net/uploads/c95f10b705.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* { font-family: 'Trebuchet MS' , 'Liberation Sans' , 'DejaVu Sans' ,sans-serif; }
.dataTables_wrapper { position: relative; min-height: 302px; clear: both; _height: 302px; zoom: 1; /* Feeling sorry for IE */ }
.dataTables_length { width: 40%; float: left; }
.dataTables_filter { width: 50%; float: right; text-align: right; }
table.display { margin: 0 auto; width: 100%; clear: both; }
table.display thead th { padding: 3px 18px 3px 10px; border-bottom: 1px solid black; font-weight: bold; cursor: pointer; *cursor:hand;}
table.display tfoot th { padding: 3px 10px; border-top: 1px solid black; font-weight: bold; }
table.display tr.heading2 td { border-bottom: 1px solid #aaa; }
table.display td { padding: 3px 10px; }
table.display td.center { text-align: center; }
tr.odd { background-color: #E2E4FF; }
tr.even { background-color: white; }
.clear { clear: both; }
.dataTables_empty { text-align: center; }
table.display tr.even.row_selected td { background-color: #B0BED9; }
table.display tr.odd.row_selected td { background-color: #9FAFD1; }
table.display td { font-family: Consolas, "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco, "Courier New" , Courier, monospace; font-size: 11px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://soapi.info/rest/api?format=json&jsonp=?", function(data) {
var aDataSet = [];
$(data.Routes).each(function(idx, route) {
$(route.Parameters).each(function(idx, param) {
aDataSet.push([route.RouteName, param.Name, param.TypeDescription,
param.Optional.toString(), param.IsArray.toString(), param.Size, param.Summary]);
});
});
$('#grid').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
"bPaginate": false,
"aaData": aDataSet,
"aoColumns": [
{ "sTitle": "RouteName" },
{ "sTitle": "Name" },
{ "sTitle": "TypeDescription" },
{ "sTitle": "Optional" },
{ "sTitle": "IsArray" },
{ "sTitle": "Size" },
{ "sTitle": "Summary" }
]
});
}, function(data) { alert(data.message); });
});
</script>
</head>
<body>
<h3>
SOAPI-PARAM-EXAM</h3>
<p>
A sortable, filterable list of all parameters in the Stack Overflow api</p>
<div id="container">
<div id="grid">
</div>
</div>
</body>
</html>
