Reporting REST data with DataTables and Bootstrap
Recently, I was requested to make a webpage to report data consumed via JSON to do a demonstration of RESTful architectures. I am not really a web developer so the challenge was interesting, yet easy enough so it wouldn’t take too much time.
Ultimately, I made a very simple table-based report with a jQuery plugin named dataTables. This plugin has very weird behaviours, but a nice look and feel. It also offers integration with Bootstrap, and together they provide some interesting results. As you can see in the demo, the plugin allows to order by columns and do quick searches, which is nice.
Of course, I wanted the report to be updated every time the JSON source changed. In other words, the code should be future-proof enough that it could handle when records are added, edited or deleted from the JSON file. This may seem very obvious, but when I was doing research about how to do it, I found weird suggestions, like parsing the REST data in the backend and then basically hardcoding it in the HTML. This is the result.
This is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Locations</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
var dataSet = [];
$(document).ready(function() {
var restAPI = "http://kippel.net/rest_demo/locations.json";
$.getJSON( restAPI )
.done(function( data ) {
$.each( data.results, function( i, result ) {
var newArray = [];
newArray.push(result.city_id);
newArray.push(result.id);
newArray.push(result.name);
dataSet.push(newArray);
});
$('#resultsTable').DataTable( {
"data": dataSet
});
});
} );
</script>
</head>
<body>
<div class="container" style="margin-top: 10px">
<table id="resultsTable" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>City ID</th>
<th>Location ID</th>
<th>Location name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>City ID</th>
<th>Location ID</th>
<th>Location name</th>
</tr>
</tfoot>
</table>
</div>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" rel="stylesheet">
</body>
</html>
This is some data from the JSON data source, just so you can see the format:
{
"results": [
{
"city_id": 9,
"id": 1,
"name": "BAR 1 DC"
},
{
"city_id": 6,
"id": 25,
"name": "25 1 C2"
},
{
"city_id": 6,
"id": 26,
"name": "25 1 D3"
},
{
"city_id": 25,
"id": 54,
"name": "Ozone 3 1 GBS Server Room 145"
},
{
"city_id": 39,
"id": 76,
"name": "XinYi Building 1F Server Room"
}
]
}
This was an interesting little project, it was obviously not made by a professional web developer, so if you have any suggestions, please go ahead and leave a comment.