I have searched for a solution to this issue multiple times, but none of the suggested fixes seem to work for me. I have dedicated several days to figuring out how to display the sorting arrows on my table, but with no luck. I am looking to show the arrows and highlight the sorted column on my HTML code below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/style.css" media="print, projection, screen" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js"> </script>
<script type="text/javascript" id="js" >
$(document).ready(function()
// call the tablesorter plugin
{
$("#myTable").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});
</script>
</head>
<body>
<table id="myTable" 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> ...
The CSS linked in my code is sourced from the website displayed below:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 12pt;
padding: 4px;
}
table.tablesorter th.header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter th.headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter th.headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter th.headerSortDown, table.tablesorter th.headerSortUp {
background-color: #8dbdd8;
}
All the GIF files referenced in the CSS are located in the same folder. By removing the .header portion, the image displayed but did not change upon sorting. This issue is critical for my project, so any assistance you can provide would be greatly appreciated!