Develop Reference

how to sum variables extracted from .json file?

I have 5 variables extracted from a json packet that I display in a table. I want to sum those five to make a sixth variable that I can then also use in the table.
The variables I want to sum are activity1distance to activity5distance, summed to activitytotaldistance
The page in question is
https://vk7krj.com/running.html
and the table is the "Last 5 activities on Strava"
Below is the relevant code from the page-
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data)
$("#start_date_local_1").html((data[0].start_date_local).slice(0, 10))
$("#activity1type").html(data[0].type)
$("#activity1name").html(data[0].name)
$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3))
$("#elevation1").html(data[0].total_elevation_gain)
$("#moving_time_1").html(toTime(data[0].moving_time))
$("#start_date_local_2").html((data[1].start_date_local).slice(0, 10))
$("#activity2type").html(data[1].type)
$("#activity2name").html(data[1].name)
$("#activity2distance").html(((data[1].distance) / 1000).toFixed(3))
$("#elevation2").html(data[1].total_elevation_gain)
$("#moving_time_2").html(toTime(data[1].moving_time))
$("#start_date_local_3").html((data[2].start_date_local).slice(0, 10))
$("#activity3type").html(data[2].type)
$("#activity3name").html(data[2].name)
$("#activity3distance").html(((data[2].distance) / 1000).toFixed(3))
$("#elevation3").html(data[2].total_elevation_gain)
$("#moving_time_3").html(toTime(data[2].moving_time))
$("#start_date_local_4").html((data[3].start_date_local).slice(0, 10))
$("#activity4type").html(data[3].type)
$("#activity4name").html(data[3].name)
$("#activity4distance").html(((data[3].distance) / 1000).toFixed(3))
$("#elevation4").html(data[3].total_elevation_gain)
$("#moving_time_4").html(toTime(data[3].moving_time))
$("#start_date_local_5").html((data[4].start_date_local).slice(0, 10))
$("#activity5type").html(data[4].type)
$("#activity5name").html(data[4].name)
$("#activity5distance").html(((data[4].distance) / 1000).toFixed(3))
$("#elevation5").html(data[4].total_elevation_gain)
$("#moving_time_5").html(toTime(data[4].moving_time))
if (data[0].distance > 0) {
$("#time_km_1").html(toTime(((data[0].moving_time) / ((data[0].distance) / 1000))).slice(3))
} else {}
if (data[1].distance > 0) {
$("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
} else {}
if (data[2].distance > 0) {
$("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
} else {}
if (data[3].distance > 0) {
$("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
} else {}
if (data[4].distance > 0) {
$("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
} else {}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>

So there is a pattern, that I am sure you saw, that you can repeat, thus condensing your code:
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data);
/* ADDED A VARIABLE HERE CALLED AGGREGATE */
/* INITIALIZED IT TO 0 AND ADD ANOTHER NUMBER TO IT... */
let aggregate = 0;
for (let i = 0; i < 5; i++)
{
$("#start_date_local_" + (i + 1)).html((data[0].start_date_local).slice(0, 10))
$("#activity" + (i + 1) + "type").html(data[i].type)
$("#activity" + (i + 1) + "name").html(data[i].name)
$("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3))
$("#elevation" + (i + 1)).html(data[i].total_elevation_gain)
$("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time))
if (data[i].distance > 0) {
$("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3))
} else {}
/* HERE! (FOLLOW UP FROM PREVIOUS COMMENT) */
aggregate += Number(data[i].distance);
console.log(aggregate);
// we can get an element with document.getElementById()
// then we can use .innerHTML on the element and set it to something
the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
the_div_element_we_want_to_add_data_to.innerHTML = aggregate / 1000;
//etc etc
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>
Unfortuneately, I can't get /running/stava_activities.json to test if I made the proper corrections, but the concept is there. I left an aggregate at the bottom of the for loop to show how you might sum those values.

How to sort multiple tables with jQuery

I want to sort all values but jquery sorts only three values
I want multiple table sort on tag h2 but when i sort it only sort first 3 values but i want all values
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort(function(a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(sorting)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>

You need to use - :
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort((a, b) => $(a).find("h2").text() - $(b).find("h2").text()).appendTo("#container")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>

Export html to pdf using jsPDF

Hi I want to Export html to pdf, I have use jsPDF all are working pdf also exporting but i want to get same html in pdf, html styles are not working what can I do for that can anyone help me please? Is their are any way to use html styles in jsPDF?? This is my html code. I got a script function from this link http://jsfiddle.net/xzZ7n/1/
<div class="panel col-xs-12 col-sm-12 col-md-11" style="" id="quotation">
<header><img src="~/images/doc/header_footer/TOUR_Header.png" width="600" /></header>
<table width="600" border="0" style="font-size:12px;border:none;" ng-repeat="endetails in enquiryQuote" id="enq_details">
<tr>
<td><b>Enquiry Date</b></td>
<td>{{endetails.system_date_time | date:fullDate}}</td>
<td><b>Enquiry ref.</b></td>
<td>{{endetails.reference_no}}</td>
</tr>
<tr>
<td><b>Dep. date</b></td>
<td>{{endetails.departing_date | date:fullDate}}</td>
<td><b>Depart. from</b></td>
<td>{{endetails.departing_from}}</td>
</tr>
<tr>
<td><b>Ret. date</b></td>
<td>{{endetails.returning_date | date:fullDate}}</td>
<td><b>Travel. to</b></td>
<td>{{endetails.travelling_to}}</td>
</tr>
<tr>
<td><b>Customer</b></td>
<td>{{endetails.name}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="300" border="0" style="font-size:12px;border:none;" ng-repeat="total in invoice_total">
<tr>
<td><b>Total Price</b></td>
<td>{{total.total_amount}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product in invheader[0].invoice_hotel">
<tr>
<td><font color="red;">Hotel Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Hotel name</b></td>
<td style="width:300px;">{{product.hotel_name}}</td>
<td style="width:150px;"><b>No of rooms</b></td>
<td style="width:300px;">{{product.no_of_rooms}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Location</b></td>
<td style="width:300px;">{{product.city_code}}</td>
<td style="width:150px;">Room view</td>
<td style="width:300px;">{{product.product_hotel_room_views.roomview_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkin</b></td>
<td style="width:300px;">{{product.check_in| date:fullDate}}</td>
<td style="width:150px;">Room type</td>
<td style="width:300px;">{{product.product_hotel_room_types.room_type_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkout</b></td>
<td style="width:300px;">{{product.check_out| date:fullDate}}</td>
<td style="width:150px;">Board basis</td>
<td style="width:300px;">{{product.product_hotel_board_basis.bb_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>No of nights</b></td>
<td style="width:300px;"> </td>
<td style="width:150px;"> </td>
<td style="width:300px;"> </td>
</tr>
<tr>
<td colspan="4">
<b>Passengers - Rooms</b>
<div ng-repeat="item in product.product_hotel_room"><b>Adult :</b> {{item.adults}} and <b>Child :</b> {{item.child}}</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b></td>
<td>{{product.payable}}</td>
<td><b>Rate</b></td>
<td>{{product.rate}}</td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_flight in invheader[0].invoice_flight">
<tr>
<td><font color="red;">Flight Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Depatur City</b></td>
<td style="width:300px;">{{product_flight.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_flight.arrival_city}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Depature date</b></td>
<td style="width:300px;">{{product_flight.depature_date | date:fullDate}}</td>
<td style="width:150px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_flight.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td colspan="4">
<b>Passengers</b>
<br />
<div ng-repeat="item_flight_pass in product_flight.invoice_flight_passengers"><b>Name :</b>{{item_flight_pass.title}}.{{item_flight_pass.first_name}} {{item_flight_pass.last_name}} </div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_flight.budget}}</td>
<td><b>Total</b> {{product_flight.total_sell_amt}} </td>
<td><b>Commision</b> {{product_flight.commission_on}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_car in invheader[0].invoice_car">
<tr>
<td><font color="red;">Car Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_car.pickup}}</td>
<td style="width: 178px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_car.dropoff}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_car.datein | date:fullDate}}</td>
<td style="width: 178px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_car.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_car.timein | date:fullDate}}</td>
<td style="width: 180px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_car.timeout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Car Type</b></td>
<td style="width:300px;">{{product_car.type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_car.payable}}</td>
<td><b>Total</b> {{product_car.buyamount}}</td>
<td><b>Commision</b> {{product_car.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_tour in invheader[0].invoice_tour">
<tr>
<td><font color="red;">Tour Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Tour Details</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_tour.pick_up}}</td>
<td style="width:150px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_tour.drop_off}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_tour.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_tour.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_tour.timein | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_tour.timeout | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_tour.payable}}</td>
<td><b>Total</b> {{product_tour.buyamount}}</td>
<td><b>Commision</b> {{product_tour.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_rail in invheader[0].invoice_rail">
<tr>
<td><font color="red;">Rail Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure</b></td>
<td style="width:300px;">{{product_rail.departurecity}}</td>
<td style="width:150px;"><b>Arrival</b></td>
<td style="width:300px;">{{product_rail.arrivalcity}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_rail.type}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_rail.budget}}</td>
<td><b>Total</b> {{product_rail.amount}}</td>
<td style="width:165px;"><b>Quote Price</b> {{product_rail.quote_price}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_transfer in invheader[0].invoice_transfers">
<tr>
<td><font color="red;">Transfers Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>From City</b></td>
<td style="width:300px;">{{product_transfer.from_city}}</td>
<td style="width:150px;"><b>To City</b></td>
<td style="width:300px;">{{product_transfer.to_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Vehicle Type</b></td>
<td style="width:300px;">{{product_transfer.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_transfer.budget}}</td>
<td><b>Buy Amount</b> {{product_transfer.amount}}</td>
<td style="width:165px;"><b>Payable</b> {{product_transfer.payable}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_cruise in invheader[0].invoice_cruise">
<tr>
<td><font color="red;">Cruise Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_cruise.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_cruise.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_cruise.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_cruise.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_cruise.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_cruise.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_cruise.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_cruise.budget}}</td>
<td><b>Amount</b> {{product_cruise.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_cruise.commission_amount}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_insurance in invheader[0].invoice_insurance">
<tr>
<td><font color="red;">Insurance Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_insurance.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_insurance.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_insurance.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_insurance.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_insurance.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_insurance.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_insurance.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_insurance.budget}}</td>
<td><b>Amount</b> {{product_insurance.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_insurance.commission_amount}}</td>
<td> </td>
</tr>
</table>
<footer><img src="~/images/doc/header_footer/TOUR_Footer.png" width="600" /></footer>
</div>

<div class="rightpan" id='printablediv'>
<p>Print Content</p>
<input type='button' id="cmd" value="Download" class="button1 sbtbutton" />
<div>
<div style="display: none;" id="editor"></div>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var element = $("#printablediv"); // global variable
var getCanvas; // global variable
$("#cmd").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#editor").append(canvas);
getCanvas = canvas;
var img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Vistordetails.pdf');
form.width(cache_width);
}
});
});

Late Answer!!
Use Html2Canvas plugin to convert a div to canvas
next add the canvas image to JsPDF doc

Tablesorter non-functional after load even though its placed in the callback function

I had a similar question earlier and at the time placing the tablesorter call in the .load() callback worked, but now, after what I thought was unrelated changes, its devolved to its former behavior: It sorts initially, but after the load clicking on the column headers has no effect. Any help is appreciated.
EDIT: It looks as though the tablesorter function works when the commented code is commented out, but not when it isn't, but I can't see why the commented code affects the uncommented code. Apologies for changing the scope of the question.
JS code:
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables');
}, 5000);
//var clicks = true
//$("#application-name-label").animate({
// "color": "black"
//}, 1000);
//$("#refresh-5-sec").addClass("pressed-button")
//$("#refresh-button").on("click", function(event) {
// var buttonGroup = $(this).next();
//if(clicks) {
// $(buttonGroup).fadeOut(
// function() {
// $(this).parent().css('padding-right', '235px');
// $(this).parent().animate({
// paddingRight: "15"
// }, 300);
// clicks = false;
// });
// } else {
// $(buttonGroup).fadeIn();
// clicks = true;
// };
//});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){$("#workstation-table").tablesorter(); });
}, interval);
}
});
$("#workstation-table").tablesorter();
});
HTML (from HAML template):
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5 sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30 sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60 sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
1,578,262
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
5,828,812
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
2,970,946
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,918,186
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,331,230
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
9,082,103
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
9,681,110
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
5,572,147
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
502,000
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,517,368
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
8,603,032
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
8,716,460
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
3,286,731
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
3,269,134
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
6,720,385
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
4,965,628
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,318,889
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,060,083
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
7,625,906
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,863,118
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
1,294,952
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,809,659
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered' id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
dignissimos
</td>
<td>
19,787
</td>
<td>
1,278,685
</td>
<td>
2013-09-01 07:59:58
</td>
</tr>
<tr>
<td>
sint
</td>
<td>
23,634
</td>
<td>
5,673,401
</td>
<td>
2013-09-15 12:43:55
</td>
</tr>
<tr>
<td>
magnam
</td>
<td>
31,465
</td>
<td>
4,094,304
</td>
<td>
2013-09-03 09:56:55
</td>
</tr>
<tr>
<td>
enim
</td>
<td>
36,566
</td>
<td>
4,579,378
</td>
<td>
2013-09-01 08:09:41
</td>
</tr>
<tr>
<td>
quos
</td>
<td>
28,638
</td>
<td>
5,486,033
</td>
<td>
2013-07-16 01:56:16
</td>
</tr>
<tr>
<td>
voluptatibus
</td>
<td>
15,129
</td>
<td>
2,612,705
</td>
<td>
2013-07-14 04:35:11
</td>
</tr>
<tr>
<td>
ullam
</td>
<td>
17,624
</td>
<td>
3,661,141
</td>
<td>
2013-07-10 10:33:42
</td>
</tr>
<tr>
<td>
et
</td>
<td>
52,962
</td>
<td>
3,951,956
</td>
<td>
2013-07-10 09:24:28
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://lang.com/jarrett_reynolds
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://mraz.net/coy
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
HAML (just in case its helpful):
.whole-page
.container
%h1#application-title.hero-unit
.row-fluid
.span1#replication-server
= image_tag "cog_logo.png"
= image_tag "crs.png"
Replication Server
.span1.pull-right#refresh-label
%button.btn#refresh-button Refresh Rate
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-off Off
%button.btn.btn-default#refresh-5-sec 5 sec
%button.btn.btn-default#refresh-30-sec 30 sec
%button.btn.btn-default#refresh-60-sec 60 sec
%h2
%small#application-name-label Status Dashboard
#status-tables
.col-md-4
%h3 Reports
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-cidne"} } CIDNE
#collapse-cidne.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- #reports.each do |report|
- if report[:source] == "CIDNE"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-dcgs"} } DCGS
#collapse-dcgs.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- #reports.each do |report|
- if report[:source].blank?
- elsif report[:source] == "DCGS"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
.col-md-5
%h3#workstation-title Workstations
.span-1
#sort-instructions (click column name to sort)
%table#workstation-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Name
%th#table-header Downloaded
%th#table-header Available
%th#table-header Last Connect
%tbody
- #workstations.each do |workstation|
%tr
%td
= workstation[:name]
%td
= workstation[:downloaded]
%td
= workstation[:available]
%td
= workstation[:last_connect]
.col-md-3
%h3 Source
%table.table.table-striped.table-hover.table-bordered
%tr
%th#table-header Type
%th#table-header Name
%th#table-header Status
- #data_sources.each do |data_source|
%tr
%td
= data_source[:type]
%td
= data_source[:name]
%td
- if data_source[:status] == "UP"
#service-up
- else
#service-down

jQuery tablesorter doesn't sort second table

I have a page with three tables I'm sorting: two reports tables in a div id'ed as report-table(which DOESN'T sort) and one id'ed as workstation-table (which DOES sort). The initialisation of the sort is the same code so I'm not sure what's going on.
JS
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
}, 5000);
var clicks = true
$("#application-name-label").animate({
"color": "black"
}, 1000);
$("#refresh-5-sec").addClass("pressed-button")
$("#refresh-button").on("click", function(event) {
var buttonGroup = $(this).next();
if(clicks) {
$(buttonGroup).fadeOut(
function() {
$(this).parent().css('padding-right', '235px');
$(this).parent().animate({
paddingRight: "15"
}, 300);
clicks = false;
});
} else {
$(buttonGroup).fadeIn();
clicks = true;
};
});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("report-table").tablesorter({sortList: [[0,1], [1,0]]});
});
}, interval);
}
});
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5 sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30 sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60 sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
1,825,301
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,187,231
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
dolore
</td>
<td>
4,051,833
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
assumenda
</td>
<td>
4,921,630
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
7,047,737
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
3,806,981
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
sit
</td>
<td>
1,580,987
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,477,697
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,313,774
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quidem
</td>
<td>
219,960
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,816,119
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,946,655
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,278,956
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
7,676,013
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
1,230,434
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
5,415,422
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,622,098
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
6,462,915
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
8,797,296
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
9,564,459
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
8,010,943
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
524,049
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered' id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
recusandae
</td>
<td>
27,035
</td>
<td>
2,634,369
</td>
<td>
2013-09-05 21:18:46
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
49,685
</td>
<td>
1,364,771
</td>
<td>
2013-08-17 18:05:39
</td>
</tr>
<tr>
<td>
in
</td>
<td>
5,970
</td>
<td>
985,174
</td>
<td>
2013-07-16 09:57:24
</td>
</tr>
<tr>
<td>
nihil
</td>
<td>
17,907
</td>
<td>
8,029,822
</td>
<td>
2013-09-08 09:07:35
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
42,146
</td>
<td>
9,447,817
</td>
<td>
2013-07-23 14:25:28
</td>
</tr>
<tr>
<td>
facere
</td>
<td>
53,008
</td>
<td>
4,056,927
</td>
<td>
2013-07-15 22:49:34
</td>
</tr>
<tr>
<td>
et
</td>
<td>
41,147
</td>
<td>
5,211,530
</td>
<td>
2013-07-18 03:52:58
</td>
</tr>
<tr>
<td>
autem
</td>
<td>
29,545
</td>
<td>
3,338,005
</td>
<td>
2013-09-11 06:55:50
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://abbottwaters.net/keshaun_smitham
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://jones.biz/ashlynn_schaden
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

In your report-table your tbody is empty. Move all your rows into the tbody and you should be good.