Search code examples
jquerytablesorter

Tablesorter Jquery plugin not work (asp project)


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'); 
}

Solution

  • 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!