When testing the code below in Chrome and Safari, it shows up fine with the ability to sort and search for each row. However, when using IE (Internet Explorer), specifically version 10, the functionality is not working – clicking on the refresh link does not trigger anything in IE.
I have two questions: 1. How can I make it work in IE like it does in other browsers? 2. The Desc/Asc arrows are missing, how can I make them appear?
To see the code/example, you can visit this link. You can also refer to the code snippet below.
Thank you for taking the time to read my question. Any help or suggestions would be greatly appreciated.
HTML CODE:
<table id="tablesorter-demo" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365c455b5f425e76515b575f5a1855595b">[email protected]</a></td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2949093919ab28b939a9d9ddc919d9f">[email protected]</a></td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
... (additional rows) ...
<a id="append" href="#">Refresh Page</a>
JAVASCRIPT CODE:
$(function() {
var $table = $("#tablesorter-demo");
$("#append").click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/echo/json/',
data: {
json: JSON.stringify({
table: '<tr> <td>Smith</td><td>Frank</td><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a5b0aeaab7ab83baa2abacaceda0acae">[email protected]</a></td><td>$50.00</td> <td>http://www.frank.com</td></tr><tr><td>Jones</td><td>Frank</td><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdc1c4c5ced8ebd2cac3c4c485c8c4c6">[email protected]</a></td><td>$50.00</td> <td>http://www.frank.com</td></tr>',
})
},
success: function(response) {
$table
.find('tbody')
.html('')
.append(response.table);
$table.trigger("update", [true]);
}
});
});
$table.tablesorter({
theme: 'blue',
widthFixed : true,
... (other options/settings) ...