I've a simple table with thead and tbody.
I've added this to my site.master:
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>
And this before the table in the asp page:
$(document).ready(function () {
$(function () {
$("#DispTable").tablesorter();
});
})
But i can't sort the columns of my table.
Actually i use another plugin on the table to fix the header. Maybe i've a conflict???
Thanks
EDIT: the css
Actually the plugin don't sort and i can't see the bg.gif/asc.gif/desc.gif images.. dont know why.
table.tablesorter th {
cursor:pointer;
font-size: 12px;
text-align:center;
background: url('Images/bg.gif');
background-color: #91061F;
color: white;
border: 1px white;
padding: 3px;
height: 20px
}
table.tablesorter .headerSortUp {
background-image: url('Images/asc.gif');
}
table.tablesorter .headerSortDown {
background-image: url('Images/desc.gif');
}
You are binding to the document load twice.
// A $( document ).ready() block.
$(document).ready(function(){
//stuff
});
// Shorthand for $( document ).ready()
$(function(){
//stuff
});
JQuery documentation: A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
So change your script to:
$(function () {
$("#DispTable").tablesorter();
});
And hopefully the juice starts running!