Let's get started: I have a basic table in an ASP page
<table id="provasort" class="tablesorter">
<thead>
<tr>
<th>head1</th>
<th>heade2</th>
</tr>
</thead>
<tbody>
<tr>
<td>body1</td>
<td>body2</td>
</tr>
<tr>
<td>body3</td>
<td>body4</td>
</tr>
</tbody>
</table>
I've included a link to the CSS file and the jQuery tablesort plugin in the site.master:
<link href="content/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>
This is the CSS file I downloaded from the official plugin site:
table.tablesorter {
font-size: 12px;
background-color: #4D4D4D;
width: 1024px;
border: 1px solid #000;
}
table.tablesorter th {
text-align: left;
padding: 5px;
background-color: #6E6E6E;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
}
table.tablesorter .even {
background-color: #3D3D3D;
}
table.tablesorter .odd {
background-color: #6E6E6E;
}
table.tablesorter .header {
background-image: url('../Images/bg.png');
background-repeat: no-repeat;
border-left: 1px solid #FFF;
border-right: 1px solid #000;
border-top: 1px solid #FFF;
padding-left: 30px;
padding-top: 8px;
height: auto;
}
table.tablesorter .headerSortUp {
background-image: url('../Images/asc.png');
background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
background-image: url('../Images/desc.png');
background-repeat: no-repeat;
}
The plugin is called like this:
$('#provasort').tablesorter()
Here are the issues I'm facing:
1) The plugin doesn't seem to sort my table. Clicking on the column headers doesn't do anything, and there are no errors in the console.
2) The CSS appears to be working except for the background-image in the header.
Thank you