The code below works fine when NOT using IE (Internet Explorer) I tested it with version 10 but I thinks it's probably most/all of them, in Chrome and Safari it works fine, you can sort it and the search for each row shows up but not in IE even if you click on the refresh href/link nothing happens in IE.
Question 1: I would like to know how to get it to work with IE like it does in the other browsers.
Question 2: The Desc/Asc arrows are missing, How do I get them to show.
SEE CODE/EXAMPLE HERE: http://jsfiddle.net/5PVqc/2/ or look below.
Thank you for reading my question and Thanks for any answers you can provide me.
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>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
<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>[email protected]</td><td>$50.00</td> <td>http://www.frank.com</td></tr><tr><td>Jones</td><td>Frank</td><td>[email protected]</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]);
}
});
/*$.get('updatetable.php', function(data) {
$table
.find('tbody')
.html('')
.append(data);
$table.trigger("update", [true]);
});*/
});
// call the tablesorter plugin
$table.tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
//sortList: [[2,0],[1,0]],
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
headers: { },
widgetOptions : {
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
// if true, a filter will be added to the top of each table column;
// disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
// if you set this to false, make sure you perform a search using the second method below
filter_columnFilters : true,
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// class added to filtered rows (rows that are not showing); needed by pager plugin
filter_filteredRow : 'filtered',
// add custom filter elements to the filter row
// see the filter formatter demos for more specifics
filter_formatter : null,
// add custom filter functions using this option
// see the filter widget custom demo for more specifics on how to use this option
filter_functions : null,
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : false, // true, (see note in the options section above)
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
// if true, search column content while the user types (with a delay)
filter_liveSearch : true,
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 300,
// if true, server-side filtering should be performed because client-side filtering will be disabled, but
// the ui and events will still be used.
filter_serversideFiltering: false,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Filter using parsed content for ALL columns
// be careful on using this on date columns as the date is parsed and stored as time in seconds
filter_useParsedData : false
}
});
});
There was a mismatch in the class names that were assigned by your Table Sorter JS and the ones mentioned in the CSS you had included.
For example, the following:
Class Name for Header in JS = tablesorter-header
Class Name for which style is defined in CSS = header
Similarly for ascending and descending sorting. I added the following in the CSS code area in Fiddle and the images are appearing.
table.tablesorter thead tr .tablesorter-header {
background-image: url(http://tablesorter.com/themes/blue/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .tablesorter-headerAsc {
background-image: url(http://tablesorter.com/themes/blue/asc.gif);
}
table.tablesorter thead tr .tablesorter-headerDesc {
background-image: url(http://tablesorter.com/themes/blue/desc.gif);
}
table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerDesc {
background-color: #8dbdd8;
}
For Question 2 - Seems like there could be some issue with the Table Sorter JS that you are including. Try the one available here.