BOOTGRID - Formatters + Links + Time Ago
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.downtimechecker.com/templates/default/assets/css/jquery.bootgrid.css">
<script src="//cdn.downtimechecker.com/templates/default/assets/js/jquery.bootgrid.min.js"></script>
<div class="row">
<div class="col-md-12 col-xs-12 table-responsive">
<table id="downtime_history" class="table table-hover table-striped tablesorter myTable">
<thead>
<tr>
<th data-column-id="status" data-formatter="status">Status</th>
<th data-column-id="date">Date</th>
<th data-column-id="time">Time</th>
<th data-column-id="dns-time" data-formatter="check">DNS Time</th>
<th data-column-id="response-time" data-formatter="check">Response Time</th>
<th data-column-id="time-ago" data-formatter="timeago">Time Ago</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="label label-success">UP</span></td>
<td>03 Aug 2014</td>
<td>11:48 AM</td>
<td><span style='color:green;'>12.54 ms </span></td>
<td><span style='color:green;'>26.39 ms </span></td>
<td><abbr class="timeago" title="2014-08-03T11:48:44+00:00">tt 2014-08-03T11:48:44+00:00</abbr></td>
</tr>
<tr>
<td><span class="label label-success">UP</span></td>
<td>03 Aug 2014</td>
<td>11:37 AM</td>
<td><span style='color:green;'>0.62 ms </span></td>
<td><span style='color:green;'>14.65 ms </span></td>
<td><abbr class="timeago" title="2014-08-03T11:37:28+00:00">2014-08-03T11:37:28+00:00</abbr></td>
</tr>
<tr>
<td><span class="label label-error">DOWN</span></td>
<td>03 Aug 2014</td>
<td>07:32 AM</td>
<td><span style='color:green;'>0.67 ms </span></td>
<td><span style='color:green;'>15.08 ms </span></td>
<td><abbr class="timeago" title="2014-08-03T07:32:00+00:00">2014-08-03T07:32:00+00:00</abbr></td>
</tr>
<tr>
<td><span class="label...
JavaScript
$(function()
{
$("#downtime_history").bootgrid({
/*
Formatter are in general reusable.
*/
formatters: {
"check": function(column, row)
{
console.log(row);
/* Dynamically detect if it is green, red or someth */
return "<span style='color:green;'> c" + row[column.id] + "</span>";
},
"status": function(column, row)
{
/* Dynamically detect if it is UP or Down. */
var value = row[column.id],
label = (value === "UP") ? "success" : "danger";
return "<span class='label label-" + label + "'>" + value + "</span>";
},
"timeago": function(column, row)
{
var value = row[column.id];
return "<abbr class='timeago' title='" + value + "'>hh " + value + "</abbr>";
}
}
});
});